Title Bar

The Title Bar component provides a consistent header for terminal-like interfaces, displaying application information such as icons, titles, and instance details.

Base Structure

The Title Bar consists of three main elements: an icon, a title, and an optional instance label. These elements are arranged horizontally and automatically spaced.

Basic Title Bar

The basic Title Bar includes an icon and title. Use the title_bar class for the container.

Basic Title Bar

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

Title Bar with Instance

Add an instance label using the instance class to display additional context.

Title Bar with Instance Production

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