Overlay-section

Jump To:

Demos

Basic Overlay Section

A section with a full-bleed background and centered content box.

Centered Content

This content box is centered over the background image, providing a clear focal point for messaging.

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

Right-Aligned Overlay

Using the `overlay-section--right` modifier to position the content box on the right side of the section.

Side Aligned

Positioning content to the side can help prevent obscuring important details in the background image.

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

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "content-background-color" : white,
  "content-border" : 1px solid rgb(227, 227, 227),
  "content-padding" : 2.5rem,
  "content-width" : 34rem,
  "min-height" : 75vh,
  "padding" : 6rem,
  "breakpoints" : (
    "medium" : (
      "direction" : "down",
      "padding" : 4rem,
    ),
    "small" : (
      "direction" : "down",
      "padding" : 2rem,
      "content-padding" : 1.5rem
    )
  )
);

File Information

File: _overlay-section.scss
Group: overlay-section
Type: variable
Lines (comments): 14-22
Lines (code): 24-42

Map Properties

Name	Type	Default	Description
content-background-color	Color	white	The background color of the content.
content-border	CssValue	1px solid rgb(227, 227, 227)	The border of the content
content-padding	Dimension	2.5rem	The padding of the content.
content-width	Dimension	34rem	The width of the content.
min-height	Dimension	75vh	the min-height of the section.
padding	Dimension	6rem	The padding of the container.
breakpoints	Map	Map	The breakpoints of the section.

Mixins

set()

Mixin

Change modules $config

File Information

File: _overlay-section.scss
Group: overlay-section
Type: mixin
Lines (comments): 44-47
Lines (code): 49-51

Examples

@include ulu.component-overlay-section-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _overlay-section.scss
Group: overlay-section
Type: mixin
Lines (comments): 62-64
Lines (code): 66-119

Examples

@include ulu.component-overlay-section-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _overlay-section.scss
Group: overlay-section
Type: function
Lines (comments): 53-56
Lines (code): 58-60

Examples

@include ulu.component-overlay-section-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config