An example of this section level component in action, please see the Department Home Page
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 grey-bg py-5">
<div class="container mx-auto">
<h2 class="h3 orange-a11y">Featured Hall Amenities</h2>
<p class="blue mb-5">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="row blue text-center">
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-plug-circle-check fa-6x p-3"></span>
<h3 class="h6 blue">All Utilities Included</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-washing-machine fa-6x p-3"></span>
<h3 class="h6 blue">Laundry Room</h3>
<p>Ducimus sint saepe impedit sequi veniam quia, eveniet obcaecati doloribus consectetur laborum illum reiciendis.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-person-swimming fa-6x p-3"></span>
<h3 class="h6 blue">Swimming Pool/Hot Tub</h3>
<p>Officia enim ipsam nobis? Aliquid ex at harum.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-wifi-weak fa-6x p-3"></span>
<h3 class="h6 blue">High Speed Internet/Wi-Fi</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-basketball-hoop fa-6x p-3"></span>
<h3 class="h6 blue">Basketball courts</h3>
<p>Ducimus sint saepe impedit sequi veniam quia, eveniet obcaecati doloribus consectetur laborum illum reiciendis.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-bench-tree fa-6x p-3"></span>
<h3 class="h6 blue">Two Courtyards</h3>
<p>Officia enim ipsam nobis? Aliquid ex at harum.</p>
</div>
</div>
</div>
</section>
/* components/03-sections/10-icon-callout/icon-callout.scss */
/* BEGIN icon-callout.scss */
/* END icon-callout.scss */
/* Dark Mode - Icon Callout Styles */
@include color-mode(dark) {
.content-callout-wrapper.white {
.fa-6x {
&::after {
color: $white;
}
&::before {
color: $white;
}
}
}
.content-callout-wrapper.white p {
color:$white;
}
}
/* Icon Callout Styles END */
<section class="content-callout-wrapper grey-bg py-5">
<div class="container mx-auto">
<h2 class="h3 orange-a11y">{{ headline }}</h2>
<p class="blue mb-5">{{ subhead }}</p>
<div class="row blue text-center">
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-plug-circle-check fa-6x p-3"></span>
<h3 class="h6 blue">All Utilities Included</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-washing-machine fa-6x p-3"></span>
<h3 class="h6 blue">Laundry Room</h3>
<p>Ducimus sint saepe impedit sequi veniam quia, eveniet obcaecati doloribus consectetur laborum illum reiciendis.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-person-swimming fa-6x p-3"></span>
<h3 class="h6 blue">Swimming Pool/Hot Tub</h3>
<p>Officia enim ipsam nobis? Aliquid ex at harum.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-wifi-weak fa-6x p-3"></span>
<h3 class="h6 blue">High Speed Internet/Wi-Fi</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-basketball-hoop fa-6x p-3"></span>
<h3 class="h6 blue">Basketball courts</h3>
<p>Ducimus sint saepe impedit sequi veniam quia, eveniet obcaecati doloribus consectetur laborum illum reiciendis.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 my-3 mb-3">
<span class="fa-duotone fa-bench-tree fa-6x p-3"></span>
<h3 class="h6 blue">Two Courtyards</h3>
<p>Officia enim ipsam nobis? Aliquid ex at harum.</p>
</div>
</div>
</div>
</section>