30 lines
557 B
SCSS

$height: 200px;
$font-size: 36px;
/**
* A hero Jumbotron like component that acts as a visual container for sub-components.
* Sub-components will be visually centered along either axis
*/
.nacho-hero {
@include flex-column-center;
height: $height;
background-color: $brand-color;
color: $text-invert-color;
/**
* The contained element or body of the hero
*/
&__content {
width: 40%;
}
/**
* The header element of the hero
*/
&__header {
font-size: $font-size;
line-height: $font-size;
margin: 20px 0;
}
}