Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Product
Primitives & components: Teva Product

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.

Carry microdosing hoodie hashtag cray mumblecore

Tilde artisan portland poutine fixie hella

<!-- 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>Carry microdosing hoodie hashtag cray mumblecore</h1>
  </div>
  <!-- Display Header type: dash  -->
  <div class="vi-display-header vi-display-header-dash vi-typesystem">
    <h3 class="h1">Tilde artisan portland poutine fixie hella</h3>
  </div>
</div>

Use the inversed typesystem on dark backgrounds.

Vhs lomo xoxo salvia narwhal sartorial

Occupy sustainable synth williamsburg street yuccie disrupt

<!-- 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>Vhs lomo xoxo salvia narwhal sartorial</h1>
  </div>
  <!-- Display Header type: dash  -->
  <div class="vi-display-header vi-display-header-dash vi-typesystem vi-typesystem--inversed">
    <h3 class="h1">Occupy sustainable synth williamsburg street yuccie disrupt</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.

Waistcoat cronut cold-pressed tousled iphone pug

Migas mlkshk echo vice marfa bespoke
<!-- 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>Waistcoat cronut cold-pressed tousled iphone pug</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">Migas mlkshk echo vice marfa bespoke</h6>
  </div>
</div>

Use modifier --collapsed and --expanded to only show the dash in collapsed or expanded state.

Mlkshk loko aesthetic plaid biodiesel thundercats

Ramps helvetica scenester yr butcher

<!-- 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>Mlkshk loko aesthetic plaid biodiesel thundercats</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>Ramps helvetica scenester yr butcher</h1>
  </div>
</div>

Use modifier --no-dash to remove the dash.

Authentic disrupt cray beard hammock

<!-- 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>Authentic disrupt cray beard hammock</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.

Normcore retro marfa everyday selvage

<!-- 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>Normcore retro marfa everyday selvage</h1>
  </div>
</div>

Tagline with black triangle #

Example of tagline with black triangle.

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>

Tagline with footnote-marker #

Example of tagline with black triangle.

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