Skip to main content

component

TuxSectionHeader

The signature TTI editorial section header — ALL-CAPS Maroon title paired with a Warm Gold accent keyline rule. Reflects the institutional header rhythm found across tti.tamu.edu. Distinct from heading--bold and generic dividers, providing clear visual hierarchy across long documents.

Interactive Component Playground

TuxSectionHeader Workbench

Presets:
Division 04 // Mobility Analysis

Active Research Programs

Multimodal freight & automated vehicle safety initiatives across Texas corridors

Properties Inspector5 configurable knobs
Section Titletitle
Subtitle / Descriptionsubtitle
Kicker / Eyebrowkicker
Header Variantvariant
Heading Levellevel
Dynamic Component Syntax
<tux-section-header title="Active Research Programs" subtitle="Multimodal freight & automated vehicle safety initiatives across Texas corridors" kicker="Division 04 // Mobility Analysis" variant="institutional" :level="2"></tux-section-header>

level 1

Biggest section heading

Research grants overview

Level 1 — the biggest

<tux-section-header :level="1" subtitle="Level 1 — the biggest">
  Research grants overview
</tux-section-header>

level="1" renders as <h1> with text-2xl md:text-3xl. Use for primary division headers.

level 2 (default)

Default section heading

Classification tiers

Level 2 — default

<tux-section-header :level="2" subtitle="Level 2 — default">
  Classification tiers
</tux-section-header>

level 3

Smallest variant

Tag namespaces

<tux-section-header :level="3">Tag namespaces</tux-section-header>

with subtitle

Metadata below the bar

Index catalog

4,218 documents across 17 indices

<tux-section-header :level="2" subtitle="4,218 documents across 17 indices">
  Index catalog
</tux-section-header>

subtitle renders as secondary text beneath the heading — ideal for counts, timestamps, or "last verified" metadata.