Hero

Full-width hero sections with background support, overlays, and flexible content positioning.

Default (dark, bottom-aligned)

Established 1872

The World's First National Park

2.2 million acres of breathtaking wilderness.

<section class="ug-hero ug-hero--dark ug-hero--auto">
  <div class="ug-hero__content">
    <p class="ug-hero__subtitle">Established 1872</p>
    <h2 class="ug-hero__title">The World's First National Park</h2>
    <p class="ug-hero__lead">2.2 million acres of breathtaking wilderness.</p>
    <div class="ug-hero__actions">
      <a class="ug-hero__btn ug-hero__btn--filled" href="#">Plan Your Visit</a>
      <a class="ug-hero__btn" href="#">Explore Map</a>
    </div>
  </div>
</section>

Center Aligned

Explore the Wilderness

Over 1,000 miles of trails through pristine landscapes.

<section class="ug-hero ug-hero--blue ug-hero--center ug-hero--auto">
  <div class="ug-hero__content">
    <h2 class="ug-hero__title">Explore the Wilderness</h2>
    <p class="ug-hero__lead">Over 1,000 miles of trails through pristine landscapes.</p>
  </div>
</section>

Light Variant

Natural Heritage

Preserving America's natural and cultural heritage.

<section class="ug-hero ug-hero--light ug-hero--auto">
  <div class="ug-hero__content">
    <h2 class="ug-hero__title" style="color:#1a1a1a">Natural Heritage</h2>
    <p class="ug-hero__lead" style="color:#333">Preserving America's natural and cultural heritage.</p>
  </div>
</section>

With Background Image

<section class="ug-hero ug-hero--full">
  <div class="ug-hero__background">
    <img src="park.jpg" alt="">
  </div>
  <div class="ug-hero__overlay"></div>
  <div class="ug-hero__content">
    <h1 class="ug-hero__title">Park Name</h1>
  </div>
</section>

Height Variants

Modifier	Height
`--full`	100vh (rounded to leading)
`--half`	50vh (default)
`--third`	33vh
`--auto`	Content-driven
`--din`	DIN landscape aspect ratio

Class Reference

Class	Description
`.ug-hero`	Hero section (default: dark, bottom, 50vh)
`.ug-hero__background`	Background image/video container
`.ug-hero__overlay`	Gradient overlay
`.ug-hero__content`	Content wrapper
`.ug-hero__title`	Hero heading
`.ug-hero__subtitle`	Subtitle
`.ug-hero__lead`	Lead paragraph
`.ug-hero__actions`	Button group
`.ug-hero__btn / --filled`	Hero buttons
`.ug-hero--full\|half\|third\|auto\|din`	Height variants
`.ug-hero--center\|top\|bottom`	Content alignment
`.ug-hero--dark\|light`	Color scheme
`.ug-hero--brown\|green\|blue\|red`	NPS color backgrounds