Hero

Large-impact section for page introductions and primary calls-to-action. Uses semantic HTML with button component.

Default Hero Section

Welcome to Axiom01

Build beautiful, semantic websites with absolute minimal classes. A modern framework for the 80% use case.

<section class="hero">
	<div class="container">
		<h1>Welcome to Axiom01</h1>
		<p class="tagline">Build beautiful, semantic websites...</p>
		<menu class="actions">
			<li><button class="button primary">Get Started</button></li>
			<li><button class="button secondary">Read Docs</button></li>
		</menu>
	</div>
</section>

Hero With Glassmorphic Components

Advanced Aesthetics

Drop a `.card.glass` right into your hero section for a stunning frosted-glass depth effect over photography or gradients.

Get Started Learn More

<!-- Ensure the hero has a background image or gradient -->
<section class="hero advanced" style="background-image: url('...')">
	<div class="container">
		<article class="card glass text-center">
			<header>
				<h2>Advanced Aesthetics</h2>
			</header>
			<p>Drop a `.card.glass` right into your hero...</p>
			<div class="actions">
				<a href="#" class="button primary large">Get Started</a>
				<a href="#" class="button outline large">Learn More</a>
			</div>
		</article>
	</div>
</section>

Markup Guidelines

`section.hero` - Triggers the gradient background and layout alignments natively.
`h1` - Automatically scales smoothly using `clamp()` logic across mobile and desktop.
`.tagline` (or just `
`) - Enforces readable max-widths inside the hero container.
`menu.actions` - Beautiful flexbox container for CTAs.

Modifiers

`.advanced` - Applied to `section.hero` to enable background images with an overlaid darkened `::before` pseudo-element.

Use Cases

Landing Pages - Primary call-to-action section at page top
Product Pages - Feature showcase introduction with CTA buttons
Service Highlights - Large banner sections explaining key benefits
Event Announcements - Highlight important events with signup buttons
Feature Promotions - Showcase specific product features or updates

Responsive Behavior

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

Optimized for small screens
Touch-friendly spacing maintained (44px minimum)
Text wraps naturally without overflow
Content density optimized for readability

Desktop (1024px+)

On desktop displays:

Enhanced visual features
Hover states and transitions
Full keyboard navigation support
Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:

Framework handles media queries
No custom CSS required
Mobile-first approach applied
Accessibility maintained at all sizes

Best Practices

Keep headline short and compelling
Write clear, action-oriented button text
Use maximum 2 buttons (primary + secondary action)
Ensure text is readable at all screen sizes
Use gradient or solid background color for contrast
Position hero near top of page for maximum visibility
Use design tokens for all styling (no hardcoded colors)
Test keyboard navigation and focus states

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Accessibility

Axiom01 ensures that the Hero component meets strict WCAG standards out of the box:

Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
Focus Management - Visible, high-contrast focus indicators without layout shifting.
Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.