Standard Life Digital Framework

Cards Background Image

full screen new window example HTML markup

The card component is a box that can include different types of content to display information prominently with a featured image above.

Usage

The background variation of the card component has 3 different size modifiers that it can be set too which change the height of the background image responsively.

The card component will extend its parent container that it is placed in, use the bootstrap grid system to prevent the card component from getting too large.

Modifier selectors

Modifier selector	Description
`slb-card__background--sm`	minimum height of 150px and maximum height of 350px, dependant on screen size.
`slb-card__background`	minimum height of 200px and maximum height of 400px, dependant on screen size.
`slb-card__background--lg`	minimum height of 250px and maximum height of 450px, dependant on screen size.
`slb-card__background--xl`	minimum height of 300px and maximum height of 500px, dependant on screen size.

.slb-card__background--sm - Small variation of the background image.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ad quasi itaque enim voluptas fugiat placeat natus magnam! Repellendus blanditiis perferendis voluptatum fugit quisquam reiciendis labore dolor, error quaerat eveniet!

Joe Blogs

March 13, 2019

.slb-card__background - Default variation of the background image.

Card title

Joe Blogs

March 13, 2019

.slb-card__background--lg - Large variation of the background image.

Card title

Joe Blogs

March 13, 2019

.slb-card__background--xl - Extra Large variation of the background image.

Card title

Joe Blogs

March 13, 2019

Markup: cards\card-background.hbs

Copy

<div class="slb-card">
    <div class="[modifier class]">
        <div class="slb-card__background-image" style="background-image: url('images/large_blog_image_780x439.jpg')">
        </div>
    </div>
    <div class="slb-card__body">
        <h3>Card title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ad quasi itaque enim voluptas fugiat placeat natus magnam! Repellendus blanditiis perferendis voluptatum fugit quisquam reiciendis labore dolor, error quaerat eveniet!</p>
        <p><a href="#">Joe Blogs</a></p>
        <p>March 13, 2019</p>
    </div>
</div>

Source: components/_card.scss