# View

A View holds content (e.g. a plugin instance). Single views use `view--full` inside the Screen; multiple views go inside a Mashup. The view modifier sets each view's share of space; the Mashup modifier controls the arrangement. View and Layout receive calculated dimensions from the device and orientation.

You don't specify the `view`. The markup you write for any plugin layout is automatically wrapped in the appropriate `view` container by the platform.

You provide the `view` yourself. Include the appropriate wrapper in your markup: `view view--full`, `view view--half_vertical`, `view view--half_horizontal`, or `view view--quadrant`.

    <!-- view view--full (platform-provided) -->
    <div class="layout">...</div>
    <div class="title_bar">...</div>
    <!-- /view -->

    <div class="view view--full">
      <div class="layout">...</div>
      <div class="title_bar">...</div>
    </div>

### Base Structure

The Layout element[Layout](/framework/docs/layout) is the core component of every View [View](/framework/docs/view) , providing a consistent container for your content.
 Views can optionally include a Title Bar [Title Bar](/framework/docs/title_bar) for additional context.

There are four view types: `view--full`, `view--half_horizontal`, `view--half_vertical`, and `view--quadrant`.
 The default full view (`view view--full`) lives directly inside the `screen` div.
 Other view types must be nested inside a [Mashup](/framework/docs/mashup) component.

#### With Layout and Title Bar

When combined with a title bar, it provides context and navigation options.

Layout

TitleInstance

    <div class="view view--full">
      <div class="layout">
        <!-- Your content here -->
      </div>

      <div class="title_bar">
        <img class="image" src="/images/plugins/trmnl--render.svg" alt="TRMNL Logo">
        <span class="title">Title</span>
        <span class="instance">Instance</span>
      </div>
    </div>

#### With only Layout

For simpler interfaces, you can create a view without a title bar using just the base view classes.

Layout

    <div class="view view--full">
      <div class="layout">
        <!-- Your content here -->
      </div>
    </div>

### Views in Mashups

When multiple plugins share a single screen, each one gets its own view, and those views must be wrapped in a[Mashup](/framework/docs/mashup) container.

The view modifier (`view--half_vertical`, `view--quadrant`, etc.) determines how much space each plugin gets.
 The mashup modifier (`mashup--1Lx1R`, `mashup--2x2`, etc.) determines how those views are arranged on screen.

Previous

[Screen Device screen dimensions, orientation, and display properties](/framework/docs/screen)

Next

[Layout Primary container for organizing plugin content](/framework/docs/layout)