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 orange-bg pt-5">
<div class="container">
<div class="row">
<h2>Medium Length Display Headline</h2>
<div class="image-collage col-md-12 col-lg-12 mt-4">
<img alt="Students sitting in a study room table with their laptops" class="image-collage-featured" height="auto" src="../../college-dls/college/images/utsa-housing-reasons-featured-academics.jpg" width="720" />
<div class="image-collage-content blue-bg clip-mask-bottom-right">
<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="orange-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 orange-bg pt-5">
<div class="container">
<div class="row">
<h2>{{ headline }}</h2>
<div class="image-collage col-md-12 col-lg-12 mt-4">
<img
alt="Students sitting in a study room table with their laptops"
class="image-collage-featured"
height="auto"
src="{{path image }}"
width="720"
/>
<div class="image-collage-content blue-bg clip-mask-bottom-right">
<h3 class="h6 white">{{ subhead }}</h3>
<p>{{ description }}</p>
<div class="row">
<div class="col mx-3 mx-md-0">
{{#each action}}
<div class="orange-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>