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.
Tumblr meh crucifix narwhal pug portland
Iphone skateboard occupy chambray post-ironic
<!-- 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>Tumblr meh crucifix narwhal pug portland</h1>
</div>
<!-- Display Header type: dash -->
<div class="vi-display-header vi-display-header-dash vi-typesystem">
<h3 class="h1">Iphone skateboard occupy chambray post-ironic</h3>
</div>
</div>Use the inversed typesystem on dark backgrounds.
Fingerstache cliche disrupt tacos pop-up swag
Schlitz wayfarers flannel swag tousled 90's
<!-- 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>Fingerstache cliche disrupt tacos pop-up swag</h1>
</div>
<!-- Display Header type: dash -->
<div class="vi-display-header vi-display-header-dash vi-typesystem vi-typesystem--inversed">
<h3 class="h1">Schlitz wayfarers flannel swag tousled 90's</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.
Ennui shoreditch xoxo hella portland
Taxidermy drinking gluten-free hella kombucha health pinterest
<!-- 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>Ennui shoreditch xoxo hella portland</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">Taxidermy drinking gluten-free hella kombucha health pinterest</h6>
</div>
</div>Use modifier --collapsed and --expanded to only show the dash in collapsed or expanded state.
Sustainable cliche yr sriracha sriracha dreamcatcher vhs
<!-- 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>Sustainable cliche yr sriracha sriracha dreamcatcher vhs</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>Blog hoodie retro leggings seitan bushwick mustache</h1>
</div>
</div>Use modifier --no-dash to remove the dash.
Irony loko master occupy keffiyeh
<!-- 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>Irony loko master occupy keffiyeh</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.
Typewriter lo-fi sartorial umami microdosing polaroid
<!-- 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>Typewriter lo-fi sartorial umami microdosing polaroid</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