The one to rule them all. This hero can fit most applications by applying different modifiers and can be extended or changed easily through configuration.

Block

.hero-standard

Very basic implementation of the standard hero unit. Text is aligned center by default.

Example

Data

Elements

- .hero-standard__body
- Required
Encompasses all content elements.
- .hero-standard__title
- Optional
The main heading element.
- .hero-standard__content
- Optional
Content elements, such as paragraphs and buttons. Usually from a WYSIWYG field.

Modifiers

- .hero-standard--left
- Enabled
Align content to the left. Please note this does not align the text – add the modifier u-text–left to align the text as well.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--left u-text--left', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--right
- Disabled
Align content to the right. Please note this does not align the text – add the modifier u-text–right to align the text as well.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--right u-text--right', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--bottom
- Disabled
Vertically aligns elements to the bottom
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--bottom', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--top
- Enabled
Align content to the top
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--top', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--extend
- Disabled
Extend the hero out a column width on each side
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--extend', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--wide
- Disabled
Full width hero unit
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--wide', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--large
- Enabled
Larger hero unit
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--large', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--fullscreen
- Enabled
Fullscreen hero unit
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'indicator' => '.band', 'modifiers' => 'hero-standard--fullscreen', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
- .hero-standard--overlay
- Enabled
Apply an overlay behind the title/content. The weight of the overlay can be adjusted with the modifiers overlay–light or overlay–heavy
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.

Data
$data = array( 'title' => 'Title', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris. Etiam scelerisque purus nisl, et tempus augue sagittis eget. Aliquam porta bibendum sapien, id vestibulum quam semper congue. Ut vitae euismod augue. Proin vitae dui ac purus tristique accumsan. Suspendisse leo libero, venenatis sed metus quis, placerat tincidunt enim. Vestibulum sed efficitur augue, ac hendrerit massa. Integer id metus in enim vestibulum dictum non vestibulum nibh. Nulla posuere a tellus eget auctor.', 'modifiers' => 'hero-standard--overlay', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );

Examples

Bottom left aligned hero unit

Title

Data
$data = array( 'title' => 'Title', 'image' => 'https://unsplash.it/1500/800?image=999', 'image_mobile' => 'https://unsplash.it/800/800?image=999', 'modifiers' => 'hero-standard--left hero-standard--bottom hero-standard--extend hero-standard--large hero-standard--overlay overlay--light u-text--left hero-standard--wide', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
Centered hero unit, but extending to full width
Title
1st March, 2016
Data
$data = array( 'title' => 'Title', 'image' => 'https://unsplash.it/1500/800?image=984', 'image_mobile' => 'https://unsplash.it/800/800?image=984', 'meta' => array('date' => 'jS F, Y', 'categories' => true), 'modifiers' => 'hero-standard--large hero-standard--wide hero-standard--text-shadow', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
Right aligned full height hero with WYSIWYG info

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris.

Button

Data
$data = array( 'title' => 'Title', 'image' => 'https://unsplash.it/1500/800?image=982', 'image_mobile' => 'https://unsplash.it/800/800?image=982', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris.<a class="btn btn--ghost-white" href="#">Button</a>', 'modifiers' => 'hero-standard hero-standard--wide hero-standard--text-shadow u-text--left hero-standard--large hero-standard--right hero-standard--narrow', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
Full height hero with indicator and full width, content aligned to the center.

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris.

Button

Data
$data = array( 'title' => 'Title', 'image' => 'https://unsplash.it/1500/800?image=982', 'image_mobile' => 'https://unsplash.it/800/800?image=982', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris.<a class="btn btn--ghost-white" href="#">Button</a>', 'indicator' => '.band', 'modifiers' => 'hero-standard--overlay overlay--light hero-standard--fullscreen hero-standard--center hero-standard--petite hero-standard--wide', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
Wider than the standard grid, content can be aligned as necessary

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris.

Button

Data
$data = array( 'title' => 'Title', 'image' => 'https://unsplash.it/1500/800?image=982', 'image_mobile' => 'https://unsplash.it/800/800?image=982', 'content' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi vel nibh mattis dignissim. Ut quis augue sit amet urna blandit suscipit. Morbi congue, risus et euismod condimentum, risus urna euismod libero, nec lacinia felis dui a mauris.<a class="btn btn--ghost-white" href="#">Button</a>', 'modifiers' => 'hero-standard--overlay hero-standard--center hero-standard--petite hero-standard--extend', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
Wider than the standard grid, content aligned to the left and bottom

Title

Data
$data = array( 'title' => 'Title', 'image' => 'https://unsplash.it/1500/800?image=982', 'image_mobile' => 'https://unsplash.it/800/800?image=982', 'modifiers' => 'hero-standard--overlay overlay--light hero-standard--bottom hero-standard--extend hero-standard--left hero-standard--large u-text--left', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );
Wider than the standard grid, content aligned to the center middle

Title

Data
$data = array( 'title' => 'Title', 'image' => 'https://unsplash.it/1500/800?image=982', 'image_mobile' => 'https://unsplash.it/800/800?image=982', 'modifiers' => 'hero-standard--overlay overlay--light hero-standard--extend hero-standard--large', ); mttr_get_template( template-parts/hero/_c.hero-standard, $data );

Block

.hero-standard

Data

Elements

.hero-standard__body

.hero-standard__title

.hero-standard__content

Modifiers

.hero-standard--left

Data

.hero-standard--right

Data

.hero-standard--bottom

Data

.hero-standard--top

Data

.hero-standard--extend

Data

.hero-standard--wide

Data

.hero-standard--large

Data

.hero-standard--fullscreen

Data

.hero-standard--overlay

Data

Examples

Data

Data

Data

Data

Data

Data

Data