Display Header
v0.0.1-alpha.0
Display Headers have specific styling and can be used as page or section title.
It requires typesystem.
Dash #
Use Dash Display Header as page or section title.
Without modifier, only wrap headings that are <h1> or have class .h1
The example is displayed inside a container with modifier --column.
Thundercats hammock pabst yuccie fixie
Mlkshk beard artisan ugh neutra asymmetrical hoodie
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: dash -->
<div class="vi-display-header vi-display-header-dash vi-typesystem">
<h1>Thundercats hammock pabst yuccie fixie</h1>
</div>
<!-- Display Header type: dash -->
<div class="vi-display-header vi-display-header-dash vi-typesystem">
<h3 class="h1">Mlkshk beard artisan ugh neutra asymmetrical hoodie</h3>
</div>
</div>Use the inversed typesystem on dark backgrounds.
Street mlkshk master yolo microdosing
8-bit hashtag street artisan typewriter pinterest chambray
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: dash -->
<div class="vi-display-header vi-display-header-dash vi-typesystem vi-typesystem--inversed">
<h1>Street mlkshk master yolo microdosing</h1>
</div>
<!-- Display Header type: dash -->
<div class="vi-display-header vi-display-header-dash vi-typesystem vi-typesystem--inversed">
<h3 class="h1">8-bit hashtag street artisan typewriter pinterest chambray</h3>
</div>
</div>Use modifier --sm to wrap headings that are <h3> or have class .h3.
On smaller devices the space between dash and text is smaller.
Artisan iphone chartreuse yolo intelligentsia bespoke
Yolo quinoa aesthetic whatever gentrify carry phlogiston
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: dash (mods: --sm) -->
<div class="vi-display-header vi-display-header-dash vi-display-header-dash--sm vi-typesystem">
<h3>Artisan iphone chartreuse yolo intelligentsia bespoke</h3>
</div>
<!-- Display Header type: dash (mods: --sm) -->
<div class="vi-display-header vi-display-header-dash vi-display-header-dash--sm vi-typesystem">
<h6 class="h3">Yolo quinoa aesthetic whatever gentrify carry phlogiston</h6>
</div>
</div>Use modifier --collapsed and --expanded to only show the dash in collapsed or expanded state.
Mixtape godard xoxo kitsch seitan scenester
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: dash (mods: --collapsed) -->
<div class="vi-display-header vi-display-header-dash vi-display-header-dash--collapsed vi-typesystem">
<h1>Mixtape godard xoxo kitsch seitan scenester</h1>
</div>
<!-- Display Header type: dash (mods: --expanded) -->
<div class="vi-display-header vi-display-header-dash vi-display-header-dash--expanded vi-typesystem">
<h1>Artisan kickstarter knausgaard tacos keytar tofu migas</h1>
</div>
</div>Use modifier --no-dash to remove the dash.
Ethical letterpress xoxo artisan lomo roof
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: dash (mods: --no-dash) -->
<div class="vi-display-header vi-display-header-dash vi-display-header-dash--no-dash vi-typesystem">
<h1>Ethical letterpress xoxo artisan lomo roof</h1>
</div>
</div>Tagline #
The tagline is a very specific preset of the display header for use in the Tagline Strip. Sizes are fixed and text supposed to be static.
The gradient text gracefully falls back to a single color if not supported.
Committed to improving the lives of patients
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: tagline -->
<div class="vi-display-header vi-display-header-tagline">
<h1>Committed to improving the lives of patients</h1>
</div>
</div>Use modifier --no-dash to remove the dash.
Umami mlkshk hella authentic xoxo
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: tagline (mods: --no-dash) -->
<div class="vi-display-header vi-display-header-tagline vi-display-header-tagline--no-dash">
<h1>Umami mlkshk hella authentic xoxo</h1>
</div>
</div>Committed to improving the lives of patients ▼
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: tagline -->
<div class="vi-display-header vi-display-header-tagline">
<h1>
Committed to improving the lives of patients
<sup class="vi-type vi-type--black-triangle">▼</sup>
</h1>
</div>
</div>Committed to improving the lives of patients 01
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Display Header type: tagline -->
<div class="vi-display-header vi-display-header-tagline">
<h1>
Committed to improving the lives of patients
<a aria-label="Footnote 01" class="vi-footnote-marker" href="#thundercats" id="thundercats_ref">01</a>
</h1>
</div>
</div>Stylesheets #
The following stylesheets are used to display this component.
Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheets are used to display the example(s).
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
- 21 Aug 2025 - feat(display-header): allow dashoffset via css custom props.
Changed
- PBS support
- Tagline, IE11 does not support gradient text. To degrade gracefully, IE11 tagline text is rendered with a solid color.
Added
- 22 Jan 2025 - feat(display-header): add
--no-dash modifier to the display-header-tagline component.
- 24 Oct 2024 - feat(display-header): Add
--no-dash, --collapsed and --expanded modifiers to the display-header-dash component.
- Partial PBS support
- RTL support
- Initial draft