Card with image component
Card component with image, three column layout using bootstrap/digital framework utilities
Example
Scale 2:5
Mark-up
<div class="row mt-3 mb-5">
<div class="container slb-background-blue-pale">
<div class="col-12">
<div class="row">
<div class="col-12 col-md-4 mb-3 mb-md-0 py-3">
<div class="slb-infobox slb-infobox--white d-flex flex-column justify-content-space-evenly h-100">
<div class="slb-infobox__image"><img class="fluid w-100" src="..." alt="..."></div>
<div class="slb-infobox__content d-flex flex-column justify-content-space-evenly">
<h3>...</h3>
<a href="#" class="slb-cta mt-auto" title="">...</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-3 mb-md-0 py-3">
<div class="slb-infobox slb-infobox--white d-flex flex-column justify-content-space-evenly h-100">
<div class="slb-infobox__image"><img class="fluid w-100" src="..." alt="..."></div>
<div class="slb-infobox__content d-flex flex-column justify-content-space-evenly">
<h3>...</h3>
<a href="#" class="slb-cta mt-auto" title="">...</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-3 mb-md-0 py-3">
<div class="slb-infobox slb-infobox--white d-flex flex-column justify-content-space-evenly h-100">
<div class="slb-infobox__image"><img class="fluid w-100" src="..." alt="..."></div>
<div class="slb-infobox__content d-flex flex-column justify-content-space-evenly">
<h3>...</h3>
<a href="#" class="slb-cta mt-auto" title="">...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Dependencies
- Information Box
- Bootstrap utilities
- Digital Framework utilities
