Heroes

.o-hero

Overview

Use at the top of the page to introduce page content. Hero sections should communicate the main purpose of the page they live on.

Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	-	`any`
hero.modifier_classes	Specifies modifier classes. All class names should follow the ABEM methodology.	`string`	`o-hero--landing`	`o-hero--landing` `any`
hero.ribbon	Determines the color of the banner svg. Use `green`, `blue` or `mango` for Landing Page Heroes. Use `green-sm` for Top Heroes, `white-sm` for In-page Hereos.	`string`	`green`	`green` `blue` `mango` `green-sm` `white-sm`
hero.content_align	Determines the alignment of all content in the hero.	`string`	`center`	`left` `center` `right`
hero.width	Specifies the width constraints of the hero content.	`string`	`md`	`sm` `md`
hero.bkgimage	Specifies the image media used as a background.	`object`	-	`any`
hero.content	Specifies the content for the hero.	`object`	-	`any`