back to playground

Cards

The cards in this design system include a title, description of linked content/subtitle, link to the content, and image.

Adjust the browser window size to view the expected responsive behaviour of the cards.

Card Title

Brief description/subtitle.


Card Title

Brief description/subtitle.


Usage

Cards should be used to provide a brief preview of linked content presented on other pages or websites. They should always include an actionable element.

Accessibility

Make sure to include descriptive alt attributes for each image and follow the guidelines for the buttons and type hierarchy.

Code Example

        <div class="card" style="width: 100%;">
            <div class="row g-3">
                <div class="col-md-6 me-5 my-auto">
                    <div class="card-body">
                        <p class="card-text">Card Title</p>
                        <h2 class="card-title">Brief description/subtitle.</h2>
                        <button class="btn-second">See More</button>
                    </div>
                </div>
                <div class="col-md">
                    <img src="#" class="img-fluid rounded" alt="...">
                </div>
            </div>
        </div>