FoundationsHero

A reusable hero section organism for design foundations pages (Colors, Typography, Layout). Provides consistent styling with title, description, optional icon, and statistics display.

Basic Hero

Design System / Foundations

Colors

A comprehensive color system with 5 carefully crafted palettes for consistent, accessible design.

With Icon

Design System / Foundations

Typography

12 responsive typography roles using clamp() for fluid scaling across all devices.

With Statistics

Design System / Foundations

Color System

5 carefully crafted color palettes with 50 total tokens for consistent, accessible design.

5 palettes

50 color tokens

Full Example with Slot

Design System / Foundations

Typography

12 responsive typography roles using clamp() for fluid scaling across all devices.

12 roles

clamp() fluid scaling

Usage Example

<x-interface-frameworks.foundations-hero
    title="Colors"
    description="A comprehensive color system..."
    icon="heart"
    :stats="[
        ['value' => '5', 'label' => 'palettes'],
        ['value' => '50', 'label' => 'tokens'],
    ]"
/>

Props

Prop	Type	Default	Description
title	string	''	Page title text
description	string	''	Brief description text
icon	string\|null	null	Optional icon name from icon set
stats	array	[]	Array of {value, label} objects
class	string	''	Additional CSS classes

Accessibility Features

Semantic header element for page structure
Proper heading hierarchy (h1 for title)
Decorative icons are hidden from screen readers
Statistics use accessible text pairing