Basic Cards

The basic cards are used everywhere on the website to link between pages

Below you will find the different definitions and options to create your basic cards

Table of contents

Overview

Global Definition

Each basic card is based on a global CSS class called “msds-basic-card”. It is important to include this class first as it is the main CSS class of the component. Without this HTML class, you cannot utilize component. There are 4 types of basic cards:

• The default Basic Cards
• Basic Cards without a caption
• Basic Cards with header icons
• Basic Cards with header images

Themes

Basic Cards have two different themes

Light Themed Cards

Light theme cards are setup as the default card

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

Dark Themed Cards

To use a dark themed card add the CSS class “msds-basic-card--dark“, this modifier will work for all basic cards

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--dark msds-basic-card--vertical-aligned">
            <div class="msds-basic-card__frame embed-responsive embed-responsive-16by9">
                <img class="msds-basic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
                    alt="Card image">
            </div>
            <div class="msds-basic-card__caption">
                <div class="msds-basic-card__caption-title">
                    Basic Cards caption title
                </div>
            </div>
            <div class="msds-basic-card__separator"></div>
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>            
        </div>
    </div>
</div>

Basic Card Layouts

Below are the different Basic Card layouts

Basic Card

Below is an example of the default Basic Card

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--vertical-aligned">
            <div class="msds-basic-card__frame embed-responsive embed-responsive-16by9">
                <img class="msds-basic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
                    alt="Card image">
            </div>
            <div class="msds-basic-card__caption">
                <div class="msds-basic-card__caption-title">
                    Basic Cards caption title
                </div>
            </div>
            <div class="msds-basic-card__separator"></div>
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                 <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>           
        </div>
    </div>
</div>

Basic Card Without A Caption

Below is an example of a Basic Card without a caption

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--vertical-aligned">
            <div class="msds-basic-card__separator"></div>
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                 <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>           
        </div>
    </div>
</div>

Basic Card Without A Caption With An Icon

Below is an example of a Basic Card without a caption with an icon

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--vertical-aligned">
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading-icon">
                    <svg class="msds-icon">
                        <use href="../../../msds-spritemap.svg#demo"></use>
                    </svg>
                </div>
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>            
        </div>
    </div>
</div>

Basic Card Without A Caption With An Image

Below is an example of a Basic Card without a caption with an image

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--vertical-aligned">
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading-icon">
                    <img src="../../../src/demo-img/milestone-systems-logo.png" alt="custom image one">
                </div>
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>            
        </div>
    </div>
</div>

Basic Card Grouping

Basic Cards can be grouped into left/center/left with icon aligned cards

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

Basic Card Left Aligned

Basic Cards that are left aligned, are our default styling for Basic Cards.

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--vertical-aligned">
            <div class="msds-basic-card__frame embed-responsive embed-responsive-16by9">
                <img class="msds-basic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
                    alt="Card image">
            </div>
            <div class="msds-basic-card__caption">
                <div class="msds-basic-card__caption-title">
                    Basic Cards caption title
                </div>
            </div>
            <div class="msds-basic-card__separator"></div>
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>            
        </div>
    </div>
</div>

Basic Card Center Aligned

Basic Cards center aligned can be setup by using the “msds-basic-card--centered“ CSS class.

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--vertical-aligned msds-basic-card--centered">
            <div class="msds-basic-card__frame embed-responsive embed-responsive-16by9">
                <img class="msds-basic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
                    alt="Card image">
            </div>
            <div class="msds-basic-card__caption">
                <div class="msds-basic-card__caption-title">
                    Basic Cards caption title
                </div>
            </div>
            <div class="msds-basic-card__separator"></div>
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>            
        </div>
    </div>
</div>

Basic Card With Icon In Caption Title

Basic Cards can have an icon in the caption title

Basic Cards caption title

Headline lorem ipsum

Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.

read more

<div class="row card-row">
    <div class="col-12 col-md-4">
        <div class="msds-basic-card msds-basic-card--vertical-aligned">
            <div class="msds-basic-card__frame embed-responsive embed-responsive-16by9">
                <img class="msds-basic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
                    alt="Card image">
            </div>
            <div class="msds-basic-card__caption">
                <div class="msds-basic-card__caption-icon" title="logo-diamond">
                    <svg class="msds-icon">
                        <use href="../../../msds-spritemap.svg#demo"></use>
                    </svg>
                </div>
                <div class="msds-basic-card__caption-title">
                    Basic Cards caption title
                </div>
            </div>
            <div class="msds-basic-card__separator"></div>
            <div class="msds-basic-card__body">
                <div class="msds-basic-card__body-heading">
                    Headline lorem ipsum
                </div>
                <div class="msds-basic-card__body-description">
                    Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
                </div>
                <a class="msds-basic-card__link" href="/">
                    read more
                </a>
            </div>            
        </div>
    </div>
</div>