Card

This page documents the expected code output and structure necessary to display cards correctly in the UI.

Core card code

Cards are designed with minimal markup and styling, yet provide plenty of control and customisation. Built using Flexbox, they support flexible alignment and integrate well with other components.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card">
    <div class="card-body">
        <div class="text-block">
            <h4 class="headline-sm">
                Card title text
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</div>

Card style

Add .card-secondary to change the card style.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card card-secondary">
    ...
</div>

Size

To increase the padding inside the card body for core and clickable cards, simply add the class .card-lg to the card element. This provides more internal padding making the card feel larger and more spacious.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card card-lg">
    <div class="card-body">
        <div class="text-block">
            <h4 class="headline-sm">
                Card title text
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</div>

Images

Cards offer flexible image placement options. You can position images at the top of the card, or align them horizontally to the left or right of the card’s content.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card">
    <img src="..." class="card-img" alt="...">
    <div class="card-body">
        <div class="text-block">
            <h4 class="headline-sm">
                Card title text
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</div>

Background images

Add .card-bkg-img to change the image into a background image for the card.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card card-bkg-img">
    <img src="..." class="card-img" alt="...">
    <div class="card-body">
        ...
    </div>
</div>

Horizontal cards

Create horizontal cards by adding the class .card-horizontal. To align the image to the right, also include .card-horizontal-right.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card card-horizontal">
    <img src="..." class="card-img" alt="...">
    <div class="card-body">
        <div class="text-block">
            <h4 class="headline-sm">
                Card title text
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</div>

<div class="card card-horizontal card-horizontal-right">
    <img src="..." class="card-img" alt="...">
    <div class="card-body">
        <div class="text-block">
            <h4 class="headline-sm">
                Card title text
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</div>

Adding content

To include different types of content in a card, place the content within the .card-body container.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card">
    <div class="card-body">
        
        <div class="text-block">
            <h4 class="headline-sm">
                Card title text
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>

        <a class="link-standalone" href="#" target="_self"> 
            <span class="icon">
                <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
            </span>
            Link text
        </a>

    </div>
</div>

Clickable card

Clickable cards require a small HTML change. Replace the outer <div> with an <a> tag, add a relevant href, and include the .card-clickable class.

Card title text

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<a href="#" class="card card-clickable">
    <div class="card-body">
        <div class="text-block">  
            <h4 class="headline-sm">
                Card title text
            </h4>     
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</a>

Selectable cards

To create selectable cards, modify the markup by adding a form input and the .card-selectable class:

For single-select cards, insert a radio input with a shared name attribute and .form-check-input class inside the card.
For multi-select cards, insert a checkbox input with the .form-check-input class inside the card.

Single select card title

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

Multi select card title

Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.

html

<div class="card card-selectable">
    <input class="form-check-input" type="radio" name="selectable" id="radio-selectablecard">
    <div class="card-body">
        <div class="text-block">
            <h4 class="headline-sm">
                Single select card title
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</div>


<div class="card card-selectable">
    <input class="form-check-input" type="checkbox" value="" id="checkbox-selectablecard2">
    <div class="card-body">
        <div class="text-block">
            <h4 class="headline-sm">
                Multi select card title
            </h4>
            <p>Duis non quam et nisi tincidunt fermentum. Pellentesque habitant morbi tristique senectus.</p>
        </div>
    </div>
</div>

Item card

Use .card-img-album and .card-img-artist to change the shape of the image.

Card title

Mauris vitae quam in justo dictum sodales

Card title

Mauris vitae quam in justo dictum sodales

html

<div class="card item-card">
    <div class="item-card-img">
        <img class="card-img-album" src="...">
    </div>
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Mauris vitae quam in justo dictum sodales</p>
    </div>
</div>

<div class="card item-card">
    <div class="item-card-img">
        <img class="card-img-artist" src="...">
    </div>
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Mauris vitae quam in justo dictum sodales</p>
    </div>
</div>

Clickable Item card

Adding an <a> around the .card-body with the class .page-link makes the card clickable.

Card title

Mauris vitae quam in justo dictum sodales

html

<div class="card item-card">
    <div class="item-card-img">
        <img class="card-img-album" src="...">
    </div>
    <a class="page-link" href="#">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Mauris vitae quam in justo dictum sodales</p>
        </div>
    </a>
</div>

Item card play button

The .play-button class is used to wrap an <a> and a <button> to create a play button on hover.

Card title

Mauris vitae quam in justo dictum sodales

html

<div class="card item-card">
    <div class="item-card-img">
        <img class="card-img-album" src="...">
        <div class="play-button">
            <a href="#play">
                <button type="button" class="btn btn-secondary btn-round btn-lg">
                    <div class="btn-icon">
                        <i class="fa-solid fa-play" aria-hidden="true"></i>
                    </div>
                </button>
            </a>
        </div>
    </div>
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Mauris vitae quam in justo dictum sodales</p>
    </div>
</div>