TMS Hero

TMSHero creates a full-width editorial opening with a large title and supporting content. Use it for page-level statements that need more presence than a normal section heading.

Usage

Start big.
Say something useful.

A Tanaab-based hero converts first impressions into a disciplined brand-performance corridor, which is a majestic way of saying the top of the page should make its point quickly.

<TMSHero
  border-top
  border-bottom>
  <template #title>
    Start big. <br><strong>Say something useful.</strong>
  </template>
  <p>A Tanaab-based hero converts first impressions into a disciplined brand-performance corridor, which is a majestic way of saying the top of the page should make its point quickly.</p>
</TMSHero>

source |

Props

Prop	Type	Default	Notes
borderTop	boolean	false	Adds a top divider when enabled.
borderBottom	boolean	false	Adds a bottom divider when enabled.

Slots

Slot	Notes
#title	Oversized hero statement.
default	Supporting body content.

Variables

Variable	Purpose
--tms-hero-gap	Gap between title and content.
--tms-hero-padding-block	Vertical padding for the hero.

INFO

TMSHero automatically connects the section to its title with a generated aria-labelledby ID.