@ulu/frontend/lib/scss/components/_overlay-section.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 Overlay Section
  description: A section with a full-bleed background and centered content box.
-->
<section class="overlay-section">
  <div class="overlay-section__background">
    <img src="https://picsum.photos/id/101/1200/800" alt="Background Image">
  </div>
  <div class="overlay-section__content">
    <h2 class="h2">Centered Content</h2>
    <p>This content box is centered over the background image, providing a clear focal point for messaging.</p>
    <a href="#" class="button">Explore More</a>
  </div>
</section>

<!-- @ulu-demo
  title: Right-Aligned Overlay
  description: Using the `overlay-section--right` modifier to position the content box on the right side of the section.
-->
<section class="overlay-section overlay-section--right">
  <div class="overlay-section__background">
    <img src="https://picsum.photos/id/104/1200/800" alt="Background Image">
  </div>
  <div class="overlay-section__content">
    <h2 class="h2">Side Aligned</h2>
    <p>Positioning content to the side can help prevent obscuring important details in the background image.</p>
    <a href="#" class="button">Contact Us</a>
  </div>
</section>