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. The mashup modifier (e.g. mashup--1Lx1R, mashup--2x2) controls how the views are positioned, while each view's own modifier determines how much space it occupies.
, 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)) |