Title Bar
A header strip for a View, holding an icon, a title, and an optional instance label. Place it as a sibling of the Layout, not inside it.
Place Title Bar as a sibling of Layout inside a View. Both layout and title_bar should be direct children of the view.
Don't nest Title Bar inside Layout. title_bar and layout must be siblings, not parent and child.
<!-- view view--full (platform-provided) -->
<div class="layout">...</div>
<div class="title_bar">...</div>
<!-- /view --><!-- view view--full (platform-provided) -->
<div class="layout">
<div class="title_bar">...</div>
</div>
<!-- /view -->Base Structure
The Title Bar Title Bar Title Bar Standardized title bar with plugin information and instance details A header strip for a View, holding an icon, a title, and an optional instance label. Place it as a sibling of the Layout, not inside it. consists of three main elements: an icon Image Image Optimize images using dithering techniques for 1-bit rendering Place images on a screen and control their size, object fit, and inversion. On 1-bit displays, dithering arranges black and white pixels so an image still reads as shades of gray. , a title Title Title Style headings with consistent typography Headings for a plugin screen. Five size variants from small to xxlarge, each with responsive prefixes for breakpoints and orientation. , and an optional instance label Label Label Create clear labels for unified content identification Short captions and status chips for a plugin screen. Five sizes plus style variants (filled, outline, underline, inverted) and semantic variants such as label--success and label--error. . 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
Title Bar
Standardized title bar with plugin information and instance details
A header strip for a View, holding an icon, a title, and an optional instance label. Place it as a sibling of the Layout, not inside it.
for the container.
Basic Title Bar
<div class="title_bar">
<img class="image image--adaptive" 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 image--adaptive" src="/images/plugins/trmnl--render.svg">
<span class="title">Title Bar with Instance</span>
<span class="instance">Production</span>
</div>Title Bar in Mashups
When the Title Bar is placed inside a
Mashup
Mashup
Assemble multiple plugin views into a single interface
A Mashup arranges multiple plugin views within a single screen. A fixed mashup modifier (e.g. mashup--1Lx1R, mashup--2x2) positions the views, while each view's own modifier sets how much space it occupies. Fluid Mashups use the mashup--3x3 layout and cell placement modifiers for custom tilings.
, it automatically receives different styling. Inside a view with a mashup layout (view--half_vertical, view--half_horizontal, or view--quadrant), the title bar uses a reduced height, a smaller icon, and no top or side border radius, with rounded bottom corners only so it aligns with the view's bordered outline.
Example
The same title_bar markup is used; the framework applies the compact styling automatically when the title bar is inside a mashup view.
Calendar
RSS
<div class="mashup mashup--1Lx1R">
<div class="view view--half_vertical">
<div class="layout">
<span class="label">Plugin A</span>
</div>
<div class="title_bar">
<img class="image image--adaptive" src="/images/plugins/trmnl--render.svg">
<span class="title">Calendar</span>
</div>
</div>
<div class="view view--half_vertical">
<div class="layout">
<span class="label">Plugin B</span>
</div>
<div class="title_bar">
<img class="image image--adaptive" src="/images/plugins/trmnl--render.svg">
<span class="title">RSS</span>
</div>
</div>
</div>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--title-bar-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--title-bar-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--title-bar-font-smoothing
|
none | none | auto | - |
--title-bar-font-weight
|
400 | 400 | 700 | - |
--title-bar-height
|
calc(40px * var(--ui-scale)) | calc(40px * var(--ui-scale)) | - | calc(40px * var(--ui-scale)) |
--title-bar-image-height
|
calc(28px * var(--ui-scale)) | calc(28px * var(--ui-scale)) | - | calc(28px * var(--ui-scale)) |
--title-bar-line-height
|
1 | 1 | calc(22px * var(--text-ui-scale)) | - |
--title-bar-padding-top
|
calc(5px * var(--ui-scale)) | calc(5px * var(--ui-scale)) | 0px | 0px |
--title-bar-text-stroke-width
|
calc(3.5px * var(--ui-scale)) | calc(3.5px * var(--ui-scale)) | calc(2px * var(--ui-scale)) | calc(2px * var(--ui-scale)) |
| Small | ||||
--title-bar-small-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--title-bar-small-height
|
calc(32px * var(--ui-scale)) | calc(32px * var(--ui-scale)) | - | calc(32px * var(--ui-scale)) |
--title-bar-small-image-height
|
calc(24px * var(--ui-scale)) | calc(24px * var(--ui-scale)) | - | calc(24px * var(--ui-scale)) |
Related APIs
Theming the title bar
A theme can re-point the title bar's paint through its named
slot
(title-bar)
without touching geometry. Slots take palette token references, so the surface still resolves through the
device mode at render time. See
Theme Slots
Theme Slots
Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp
Every surface a theme can re-point, with the mixin that sets it: semantic channels, component slots, utility remaps, border lines, and the chart ramp. Slots take token references, so each one still resolves through the device mode at render time.
for every slot and mixin.
@include theme-slots.bg-slot("title-bar", "yellow-40");