Background color should not have the same color as the text box.
An example of this section level component in action, please see the College 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="image-collage blue-bg pt-5">
<div class="container">
<div class="row">
<h2 class="white">Medium Length Display Headline</h2>
<div class="image-collage-alt col-md-12 col-lg-12 mt-4">
<img alt="Students sitting in a study room table with their laptops" class="image-collage-featured-alt" height="auto" src="../../college-dls/college/images/utsa-housing-reasons-featured-belonging.jpg" width="720" />
<div class="image-collage-content-alt orange-a11y-bg clip-mask-bottom-left">
<h3 class="h6 white">Medium Length Subheader</h3>
<p>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.</p>
<div class="row">
<div class="col mx-3 mx-md-0">
<div class="blue-action-btn">
<a href="#" class="action-btn"> Action Button <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/11-image-collage/image-collage.scss */
/* BEGIN image-collage.scss */
section.image-collage > div.container > div {
max-height:560px;
}
.image-collage-featured {
position:relative;
float:left;
box-shadow: -20px 20px 0px #F6F6F6;
}
.image-collage-featured-alt {
position:relative;
float:right;
box-shadow: 20px 20px 0px #F6F6F6;
}
.image-collage-content {
position: relative;
top: -230px;
float: right;
color: #ffffff;
z-index: 1;
max-width: 50%;
// background: #0c2340;
padding: 2%;
}
.image-collage-content-alt {
position: relative;
top: -230px;
float: left;
color: #ffffff;
z-index: 1;
max-width: 50%;
// background: #D3430D;
padding: 2%;
}
/* Dark Mode - Image Collage Styles */
@include color-mode(dark) {
section.image-collage {
h2 {
color: $orange;
}
&.blue-bg {
h2 {
color: $white;
}
}
&.orange-bg {
h2 {
color: $blue;
}
}
&.grey-bg {
h2 {
color: $blue;
}
p{
color: $white;
}
}
.orange-a11y-bg .blue-action-btn>.action-btn {
background-color: $blue;
&:hover {
color: $white;
background-color: $grey-c;
}
}
}
}
/* Dark Mode - Image Collage END */
@media screen and (max-width: 575px) and (min-width: 412px) {
.image-collage-content {
top: -150px;
max-width: 70%;
padding: 3%;
}
.image-collage-content-alt {
top: -150px;
max-width: 70%;
padding: 3%;
}
}
@media screen and (max-width: 412px) {
.image-collage-content {
top: 0px;
max-width: 100%;
margin-bottom: 40px;
padding: 4%;
}
.image-collage-content-alt {
top: 0px;
max-width: 100%;
margin-bottom: 40px;
padding: 4%;
}
}
/* END image-collage.scss */
<section class="image-collage blue-bg pt-5">
<div class="container">
<div class="row">
<h2 class="white">{{headline}}</h2>
<div class="image-collage-alt col-md-12 col-lg-12 mt-4">
<img
alt="Students sitting in a study room table with their laptops"
class="image-collage-featured-alt"
height="auto"
src="{{path image}}"
width="720"
/>
<div class="image-collage-content-alt orange-a11y-bg clip-mask-bottom-left">
<h3 class="h6 white">{{subhead}}</h3>
<p>{{description}}</p>
<div class="row">
<div class="col mx-3 mx-md-0">
{{#each action}}
<div class="blue-action-btn">
<a href="{{ url }}" class="action-btn"> {{ text }} <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</section>