Hero Component

Axiom01's hero component is a prominent, full-width section typically placed at the top of a webpage. It's designed to capture attention, convey the main message, and guide users to key actions.

Basic Hero Section

Code Example

<section class="hero">
			<div class="content">
					<h1>Welcome to Axiom01</h1>
					<p>The semantic-first UI framework for building professional, accessible, and lightning-fast websites.</p>
					<div class="actions">
							<a href="#" class="button primary large">Get Started</a>
							<a href="#" class="button secondary large">Learn More</a>
					</div>
			</div>
	</section>

Usage Guidelines

The .hero class provides the background gradient, text styling, and centers the content. The colors are automatically derived from your active theme's --a-gradient-hero and --a-color-on-gradient variables, ensuring visual harmony.

Use a clear, concise heading (<h1>) and a compelling paragraph (<p>) to communicate your main message. The .actions container is ideal for placing primary and secondary call-to-action buttons.