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 Title Bar consists of three main elements: an icon Image , a title Title , and an optional instance label 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
Title Bar
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>