Jump To:

Demos

Split Hero (Graphic Left)

A hero section where the graphic and content are split side-by-side.

Innovate Your Workflow

Discover the tools and strategies that drive modern software development.

<section class="hero hero--split hero--left">
  <div class="hero__graphic">
    <img src="https://picsum.photos/id/102/1200/800" class="hero__graphic-media" alt="Hero Background">
  </div>
  <div class="hero__content">
    <div class="hero__content-container container">
      <div class="hero__content-inner">
        <h1 class="h1">Innovate Your Workflow</h1>
        <p class="type-large">Discover the tools and strategies that drive modern software development.</p>
        <div class="button-group">
          <a href="#" class="button">Get Started</a>
          <a href="#" class="button button--outline">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>

Overlay Hero

A hero section with the content overlaid on a full-width background graphic.

Full Screen Impact

Create a bold first impression with a full-width immersive experience.

Call to Action

<section class="hero hero--overlay">
  <div class="hero__graphic">
    <img src="https://picsum.photos/id/103/1200/800" class="hero__graphic-media" alt="Hero Background">
  </div>
  <div class="hero__content">
    <div class="hero__content-container container">
      <div class="hero__content-inner" style="background: rgba(255,255,255,0.8); padding: 2rem; border-radius: 8px;">
        <h1 class="h1">Full Screen Impact</h1>
        <p class="type-large">Create a bold first impression with a full-width immersive experience.</p>
        <a href="#" class="button">Call to Action</a>
      </div>
    </div>
  </div>
</section>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "breakpoint" : "medium",
  "height" : var(--ulu-fullscreen-height),
  "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	var(--ulu-fullscreen-height)	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

$config

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

get()

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

$config