Cards

Cards

CSS cards provide convenient flexbox layouts for different types of content like title, images etc.

Basic syntax

In order to create a basic card, you will need to:

• Use .card with a div tag to create the outer container
• Add the .card-content class to an inner div tag to create the card content

These are the basic elements that constitute a basic card layout, as we can see from the following example:

<div class="card">
    <div class="card-content">
        <h4>Title</h4>
        <p>Lorem ipsum.</p>
    </div>
</div>

Image Card

In the same way, we can add an image to our card element.

Top image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button 1

Center padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button 3

Bottom image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button 2

Card colours

Cards can be used to display specific messages to users. You can use the .warning class to display a yellow warning card or, if you need to display an error message to your users, you can use the .error class to display a red error card.

Sample code

<div class="card error flex-1 padding-1">
    <div class="card-content text-left">
        <h4 class="error">Error</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <button class="error center size-full-width">Button 5</button>
    </div>
</div>