Original source from https://utsa-asc.github.io/college-dls/431-dls-full-width-content-callout-no-image-no-cta/components/detail/content-callout–default.html
This component is designed to be the full-width of the page and has several variants. See the Reference Pages for examples of this component in action.
<section class="content-callout-wrapper blue-bg py-5">
<div class="container mx-auto">
<h2 class="h3 white">Medium Length Display Headline</h2>
<h3 class="h4 orange-a11y">Medium Length Subheader</h3>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p class="white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus felis. In sollicitudin tempor.elit. <a href='https://www.google.com'>Google</a></p>
<p>
<a class="orange-btn" href="#">Action</a>
<a class="blue-btn" href="#">Action</a>
<a class="grey-btn" href="#">Action</a>
</p>
<p>
<div class="orange-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
<div class="orange-action-large-btn col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<a href="#" class="action-btn btn-large">Request Information <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</p>
</div>
</section>
/* components/03-sections/08-content-callout/content-callout.scss */
/* BEGIN content-callout.scss */
.content-callout-wrapper{
&.blue-bg{
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6{
color: $white;
}
a{
color: $white;
&:hover {
color: $blue;
}
}
.orange-btn{
&:hover{
color: $white;
}
}
.blue-btn{
color: $blue;
&:hover{
color: $white;
}
}
}
&.orange-a11y-bg{
a{
color: $white;
&:hover {
color: $blue;
}
}
.blue-btn,.orange-btn{
&:hover{
color: $white;
}
}
}
&.grey-bg{
a:hover{
background-color: $blue;
}
.blue-btn{
color: $white;
&:hover{
background-color: $grey-c;
}
}
.grey-btn{
&:hover{
background-color: $white;
color: $orange-a11y;
}
}
}
}
/* END content-callout.scss */
/* Dark Mode - Component Styles - Content Callout */
@include color-mode(dark) {
.content-callout-wrapper {
.orange-a11y {
color:$orange-a11y;
}
.blue {
color: $blue;
}
.white {
color: $white;
}
.orange {
color: $orange;
}
&.grey-bg {
h3, h4, h5, h6{
color: $blue;
}
p, ul li {
color: $blue;
}
a {
color:$blue;
&:hover {
color: $white;
}
}
.blue-btn,.orange-btn,.grey-btn{
color: $white;
}
.grey-btn{
&:hover{
color: $orange-a11y;
}
}
.blue-btn{
&:hover{
color: $white;
}
}
.orange-btn{
&:hover{
color: $grey;
}
}
.blue-action-btn .action-btn{
color: $white;
}
.orange-action-btn .action-btn{
color: $white;
}
.orange-action-large-btn .action-btn{
color: $white;
}
}
&.white-bg {
p, a, ul li {
color: $blue;
}
.blue-btn,.orange-btn{
color: $white;
}
.grey-btn{
&:hover{
color: $white;
}
}
.blue-action-btn .action-btn{
color: $white;
}
.orange-action-btn .action-btn{
color: $white;
}
.orange-action-large-btn .action-btn{
color: $white;
}
}
&.blue-bg{
.blue-btn{
color: $blue;
}
.blue-btn,.grey-btn,.orange-btn{
&:hover{
color: $white;
}
}
.grey-btn{
&:hover{
color: $blue;
}
}
}
&.orange-a11y-bg{
.blue-btn,.orange-btn{
&:hover{
color: $white;
background-color: $grey-c;
}
}
.grey-btn{
&:hover{
color: $orange-a11y;
background-color: $white;
}
}
.blue-action-btn .action-btn{
color: $white;
}
.orange-action-btn .action-btn{
color: $blue;
}
.orange-action-large-btn .action-btn{
color: $blue;
}
}
}
}
/* Component Styles - Content Callout END */
<section class="content-callout-wrapper blue-bg py-5">
<div class="container mx-auto">
<h2 class="h3 white">{{ headline }}</h2>
<h3 class="h4 orange-a11y">{{ subhead }}</h3>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p class="white">{{ description }} <a href='https://www.google.com'>Google</a></p>
<p>{{render '@button--orange'}} {{render '@button'}} {{render '@button--grey'}}</p>
<p>{{render '@angled-button'}} {{render '@angled-button--blue'}} {{render '@angled-button--large'}}</p>
</div>
</section>