View

The View system provides a consistent container structure for displaying content within the application.

Base Structure

The Layout element is the core component of every View, providing a consistent container for your content. Views can optionally include a Title Bar for additional context.

View with Title Bar

The view view--full classes create a full-width view. Also available are view--half_horizontal, view--half_vertical, view--quadrant.

When combined with a title bar, it provides context and navigation options. If you're building a screen in the markup editor, you do not need to wrap your content with the view view--{{size}} classes. The example code below is sufficient for any layout.

Layout

Title Instance

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

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

View without Title Bar

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

Layout

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