@ulu/frontend
Version:
A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op
34 lines (32 loc) • 1.11 kB
HTML
<!-- @ulu-demo
title: Basic Hero
description: A hero section with content and media side-by-side on larger screens.
fullscreen: true
-->
<div class="basic-hero">
<div class="basic-hero__content container">
<div class="basic-hero__content-main">
<h1 class="h1">Hero Title with Supporting Text</h1>
<p class="type-large">This is a description that provides more context about the page or section.</p>
</div>
<div class="basic-hero__content-media">
<img src="https://picsum.photos/id/10/400/300" alt="Hero Media">
</div>
</div>
</div>
<!-- @ulu-demo
title: Centered Hero
description: A centered layout for the hero section.
fullscreen: true
-->
<div class="basic-hero basic-hero--center">
<div class="basic-hero__content container">
<div class="basic-hero__content-main">
<h1 class="h1">Centered Hero Title</h1>
<p class="type-large">A brief and compelling reason to explore further.</p>
</div>
<div class="basic-hero__content-media">
<img src="https://picsum.photos/id/20/400/300" alt="Hero Media">
</div>
</div>
</div>