Hero

Landing page hero sections with title, subtitle, and call-to-action buttons.

Primary Hero (Left-Aligned)

The primary variant features a blue gradient background. Default is left-aligned:

Welcome to Focus UI

Build beautiful interfaces with ease

HTML

<div class="focus-hero focus-hero-primary focus-hero-left">
  <h1 class="focus-hero-title">Welcome to Focus UI</h1>
  <p class="focus-hero-subtitle">Build beautiful interfaces with ease</p>
  <div class="focus-hero-actions">
    <button class="focus-btn focus-btn-lg focus-bg-white focus-text-primary">Get Started</button>
    <button class="focus-btn focus-btn-outline focus-btn-lg focus-text-white">Learn More</button>
  </div>
</div>

Centered Hero

Use the .focus-hero-center modifier for centered text and buttons:

Centered Hero Section

Perfect for landing pages

HTML

<div class="focus-hero focus-hero-primary focus-hero-center">
  <h1 class="focus-hero-title">Centered Hero Section</h1>
  <p class="focus-hero-subtitle">Perfect for landing pages</p>
  <div class="focus-hero-actions">
    <button class="focus-btn focus-btn-lg focus-bg-white focus-text-primary">Get Started</button>
    <button class="focus-btn focus-btn-outline focus-btn-lg focus-text-white">Learn More</button>
  </div>
</div>

Right-Aligned Hero

Use the .focus-hero-right modifier for right-aligned content:

Right-Aligned Hero

Alternative layout option

HTML

<div class="focus-hero focus-hero-primary focus-hero-right">
  <h1 class="focus-hero-title">Right-Aligned Hero</h1>
  <p class="focus-hero-subtitle">Alternative layout option</p>
  <div class="focus-hero-actions">
    <button class="focus-btn focus-btn-lg focus-bg-white focus-text-primary">Get Started</button>
    <button class="focus-btn focus-btn-outline focus-btn-lg focus-text-white">Learn More</button>
  </div>
</div>

Dark Hero

Use the dark variant for a modern, sophisticated look:

Dark Mode Hero

Sleek and modern design

HTML

<div class="focus-hero focus-hero-dark">
  <h1 class="focus-hero-title">Dark Mode Hero</h1>
  <p class="focus-hero-subtitle">Sleek and modern design</p>
  <div class="focus-hero-actions">
    <button class="focus-btn focus-btn-primary focus-btn-lg">Get Started</button>
    <button class="focus-btn focus-btn-outline focus-btn-lg focus-text-white">Documentation</button>
  </div>
</div>

Light Hero

The light variant adapts to the current theme for a subtle appearance:

Light Hero

Clean and minimal

HTML

<div class="focus-hero focus-hero-light">
  <h1 class="focus-hero-title">Light Hero</h1>
  <p class="focus-hero-subtitle">Clean and minimal</p>
  <div class="focus-hero-actions">
    <button class="focus-btn focus-btn-primary focus-btn-lg">Primary Action</button>
    <button class="focus-btn focus-btn-outline focus-btn-lg">Secondary Action</button>
  </div>
</div>

Minimal Hero

Hero sections can be used with minimal content:

Simple Message

Sometimes less is more

HTML

<div class="focus-hero focus-hero-primary">
  <h1 class="focus-hero-title">Simple Message</h1>
  <p class="focus-hero-subtitle">Sometimes less is more</p>
</div>

Responsive Behavior

Hero sections automatically adapt to smaller screens:

Desktop: Title is 3rem, subtitle is 1.5rem, buttons display horizontally
Tablet (≤768px): Title is 2rem, subtitle is 1.25rem, buttons stack vertically
Mobile (≤480px): Title is 1.75rem, subtitle is 1.125rem, reduced padding

CSS Classes Reference

Available classes for the Hero component:

Class	Description
`.focus-hero`	Base hero container
`.focus-hero-primary`	Primary variant with blue gradient
`.focus-hero-dark`	Dark variant with dark gradient
`.focus-hero-light`	Light variant with subtle background
`.focus-hero-left`	Left-aligned text and buttons (default style)
`.focus-hero-center`	Center-aligned text and buttons
`.focus-hero-right`	Right-aligned text and buttons
`.focus-hero-title`	Large heading (3rem on desktop)
`.focus-hero-subtitle`	Subtitle text (1.5rem on desktop)
`.focus-hero-actions`	Button container with flex layout