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>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | 4/8/16-bit |
|---|---|---|---|
| Base | |||
--title-bar-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter |
--title-bar-font-size
|
16px | 16px | calc(16px * var(--ui-scale)) |
--title-bar-font-smoothing
|
none | none | auto |
--title-bar-font-weight
|
400 | 400 | 500 |
--title-bar-height
|
40px | 40px | calc(40px * var(--ui-scale)) |
--title-bar-image-height
|
28px | 28px | calc(28px * var(--ui-scale)) |
--title-bar-line-height
|
1 | 1 | calc(22px * var(--ui-scale)) |
--title-bar-padding-top
|
5px | 5px | 0px |
--title-bar-text-stroke-width
|
3.5px | 3.5px | 2px |
| Small | |||
--title-bar-small-font-size
|
16px | 16px | calc(16px * var(--ui-scale)) |
--title-bar-small-height
|
32px | 32px | calc(32px * var(--ui-scale)) |
--title-bar-small-image-height
|
24px | 24px | calc(24px * var(--ui-scale)) |