@ulu/frontend/lib/scss/components/_basic-hero.demo.html

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

<!-- @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>