Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Hero

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "breakpoint" : "medium",
  "height" : 100vh,
  "height-compact" : 40vh,
  "graphic-height-stacked" : 60vh,
  "content-max-width" : 40rem,
  "content-padding-top" : 3rem,
  "content-padding-bottom" : 3rem,
  "text-align" : center,
  "extra-split-ratios" : (
    "wide" : (60%, 40%)
  )
);
File Information
  • File: _hero.scss
  • Group: hero
  • Type: variable
  • Lines (comments): 16-26
  • Lines (code): 28-41

Map Properties

Name Type Default Description
extra-split-ratios Map wide 70/30 A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content])
breakpoint String "medium" At what breakpoint the hero goes to small screen styling.
height Dimension 100vh Height of the hero.
height-compact Dimension 40vh Height of the hero when using the "--compact" styling.
graphic-height-stacked Dimension 60vh Height of the graphic.
content-max-width Dimension 40rem Max width of the content.
content-padding-top Dimension 3rem Top padding of the content.
content-padding-bottom Dimension 3rem Bottom padding of the content.
text-align CssValue center Text align of the content.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _hero.scss
  • Group: hero
  • Type: mixin
  • Lines (comments): 43-46
  • Lines (code): 48-50

Examples

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

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _hero.scss
  • Group: hero
  • Type: mixin
  • Lines (comments): 61-63
  • Lines (code): 65-185

Examples

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

Require

Functions

get()

Function

Get a config option

File Information
  • File: _hero.scss
  • Group: hero
  • Type: function
  • Lines (comments): 52-55
  • Lines (code): 57-59

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require