@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
41 lines (39 loc) • 1.59 kB
HTML
<!-- @ulu-demo
title: Split Hero (Graphic Left)
description: A hero section where the graphic and content are split side-by-side.
-->
<section class="hero hero--split hero--left">
<div class="hero__graphic">
<img src="https://picsum.photos/id/102/1200/800" class="hero__graphic-media" alt="Hero Background">
</div>
<div class="hero__content">
<div class="hero__content-container container">
<div class="hero__content-inner">
<h1 class="h1">Innovate Your Workflow</h1>
<p class="type-large">Discover the tools and strategies that drive modern software development.</p>
<div class="button-group">
<a href="#" class="button">Get Started</a>
<a href="#" class="button button--outline">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- @ulu-demo
title: Overlay Hero
description: A hero section with the content overlaid on a full-width background graphic.
-->
<section class="hero hero--overlay">
<div class="hero__graphic">
<img src="https://picsum.photos/id/103/1200/800" class="hero__graphic-media" alt="Hero Background">
</div>
<div class="hero__content">
<div class="hero__content-container container">
<div class="hero__content-inner" style="background: rgba(255,255,255,0.8); padding: 2rem; border-radius: 8px;">
<h1 class="h1">Full Screen Impact</h1>
<p class="type-large">Create a bold first impression with a full-width immersive experience.</p>
<a href="#" class="button">Call to Action</a>
</div>
</div>
</div>
</section>