Hero Title with Supporting Text
This is a description that provides more context about the page or section.
Basic styling for a hero
Demos
Basic Hero
A hero section with content and media side-by-side on larger screens.
<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.
<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>Centered Hero Title
A brief and compelling reason to explore further.
Main Content - Aligned Center
A hero section with the main text content vertically centered alongside taller media.
<div>
<button class="button" data-ulu-dialog-trigger="demo-modal-13">
<span class="button__icon fas fa-expand" aria-hidden="true"></span>
<span>View Fullscreen Demo</span>
</button>
</div>Vertically Centered Content
Notice how this text block sits perfectly in the middle of the available space created by the image.
Main Content - Aligned End
A hero section with the main text content aligned to the bottom.
<div>
<button class="button" data-ulu-dialog-trigger="demo-modal-14">
<span class="button__icon fas fa-expand" aria-hidden="true"></span>
<span>View Fullscreen Demo</span>
</button>
</div>Bottom Aligned Content
This text aligns to the bottom (flex-end) of the container.
Main Content - Aligned Start
A hero section with the main text content explicitly aligned to the top (overriding any global center/end defaults).
<div>
<button class="button" data-ulu-dialog-trigger="demo-modal-15">
<span class="button__icon fas fa-expand" aria-hidden="true"></span>
<span>View Fullscreen Demo</span>
</button>
</div>Top Aligned Content
This explicitly sets the alignment to the top (flex-start).
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,
"main-vertical-align" : flex-start, // Added setting
"media-max-width" : 20rem,
"media-vertical-align" : center
);File Information
- File: _basic-hero.scss
- Group: basic-hero
- Type: variable
- Lines (comments): 29-33
- Lines (code): 34-44
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 |
| main-vertical-align | CssValue | flex-start | Vertical alignment of the main content |
Mixins
set()
Mixin
Change modules $config
File Information
- File: _basic-hero.scss
- Group: basic-hero
- Type: mixin
- Lines (comments): 46-49
- Lines (code): 51-53
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): 65-67
- Lines (code): 69-131
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): 55-58
- Lines (code): 60-63
Examples
@include ulu.component-basic-hero-get("property");Parameters
| Name | Type | Description |
|---|---|---|
| $name | Map |
Name of property |