Jump To:

  1. Demos
    1. Basic Hero
    2. Centered Hero
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Basic styling for a hero

Demos

Basic Hero

A hero section with content and media side-by-side on larger screens.

HTML 
<div>
  <button class="button" data-ulu-dialog-trigger="demo-modal-11">
    <span class="button__icon fas fa-expand" aria-hidden="true"></span>
    <span>View Fullscreen Demo</span>
  </button>
</div>

Centered Hero

A centered layout for the hero section.

HTML 
<div>
  <button class="button" data-ulu-dialog-trigger="demo-modal-12">
    <span class="button__icon fas fa-expand" aria-hidden="true"></span>
    <span>View Fullscreen Demo</span>
  </button>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "background-color" : #fafafa,
  "padding-top": 3rem,
  "padding-bottom" : 2rem,
  "gap" : (4rem 2rem),
  "main-max-width" : true,
  "main-min-width" : true,
  "media-max-width" : 20rem,
  "media-vertical-align" : center
);
File Information
  • File: _basic-hero.scss
  • Group: basic-hero
  • Type: variable
  • Lines (comments): 29-32
  • Lines (code): 34-43

Map Properties

Name Type Default Description
text-align CssValue center Alignment of text within hero.
background-color Color "color-hero-background" Background color of the hero

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _basic-hero.scss
  • Group: basic-hero
  • Type: mixin
  • Lines (comments): 45-48
  • Lines (code): 50-52

Examples

@include ulu.component-basic-hero-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _basic-hero.scss
  • Group: basic-hero
  • Type: mixin
  • Lines (comments): 64-66
  • Lines (code): 68-112

Examples

@include ulu.component-basic-hero-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _basic-hero.scss
  • Group: basic-hero
  • Type: function
  • Lines (comments): 54-57
  • Lines (code): 59-62

Examples

@include ulu.component-basic-hero-get("property");

Parameters

Name Type Description
$name Map Name of property

Require