UI Components

Cards

Cards are simple content containers. They can be used in a variety of different ways such as separating sections of a page or wrapping content.

Default Card – .c-card

Example

Default Card 
<div class="c-card">
    Default Card
</div>

Outlined Card – .c-card c-card--outline

Displays a border around the card.

Example

Outlined Card 
<div class="c-card c-card--outline">
    Outlined Card
</div>

Non-padded Card – .c-card c-card--noPad

All padding has been remove

(the c-card--outline class has been used here to highlight the removal of the padding).

Example

Non-padded Card 
<div class="c-card c-card--outline c-card--noPad">
    Non-padded Card
</div>

Non-padded Card – .c-card c-card--noPadVertical

This card has horizontal padding but no vertical padding.

(the c-card--outline class has been used here to highlight the removal of the padding).

Example

Non-padded Vertical Card 
<div class="c-card c-card--outline c-card--noPadVertical">
    Non-padded Vertical Card
</div>

Rounded Corners – .c-card c-card--rounded

Used in conjunction with the c-card--outline class, this will apply rounded corners to the border.

Example

Rounded Corners 
<div class="c-card c-card--outline c-card--rounded">
    Rounded Corners
</div>

Larger Rounded Corners – .c-card c-card--rounded--large

Used in conjunction with the c-card--outline class, this will apply larger rounded corners to the border.

Example

Larger Rounded Corners 
<div class="c-card c-card--outline c-card--rounded--large">
    Larger Rounded Corners
</div>

Disabled Card – .c-card c-card--disabled

Applies a grey background to indicate that the card is disabled.

Example

Disabled Card 
<div class="c-card c-card--disabled">
    Disabled Card
</div>

Card With Content

Applies a darker background to indicate that the card is disabled.

Example

Card Title

Card content

<div class="c-card c-card--outline">
    <h3>Card Title</h3>
    <p>Card content</p>
</div>

Card With Section

Creates a section within the card which is separated by a border on larger screens.

Example

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu tellus, consequat ut maximus sit amet, molestie eget enim. Vestibulum commodo urna arcu, id feugiat dolor pharetra sit amet. Nunc id tellus nulla.

<div class="c-card c-card--outline">
    <h3 class="u-text-center u-spacingBottom--large">Card Title</h3>
    <div class="c-card-section">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu tellus, consequat ut maximus sit amet, molestie eget enim. Vestibulum commodo urna arcu, id feugiat dolor pharetra sit amet. Nunc id tellus nulla.</p>
    </div>
</div>

Card With Collapsible Section

Creates a section within the card which is collapsible.

Example

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu tellus, consequat ut maximus sit amet, molestie eget enim. Vestibulum commodo urna arcu, id feugiat dolor pharetra sit amet. Nunc id tellus nulla.

<div class="c-card c-card--outline">
    <h3 class="u-text-center u-spacingBottom--large">Card Title</h3>
    <div class="c-card-section c-card-section--collapsible c-card-section--collapsed"
        data-toggle-name="card-section-toggle"
        data-toggle-target="card-section-toggle"
        data-toggle-class="c-card-section--collapsed">
        {$ASYNCID$1$1932$}
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu tellus, consequat ut maximus sit amet, molestie eget enim. Vestibulum commodo urna arcu, id feugiat dolor pharetra sit amet. Nunc id tellus nulla.</p>
    </div>
</div>

Card Section With Highlight

Used to create a section which has a highlighted background colour applied.

Example

Card Title

Lorem ipsum dolor sit amet.

<div class="c-card c-card--outline c-card--noPadBottom">
    <h3 class="u-text-center u-spacingBottom--large">Card Title</h3>
    <p class="c-card-section c-card-section--highlight l-centered">Lorem ipsum dolor sit amet.</p>
</div>

Card Section With Highlight And Rounded Corners

Used to create a section which has a highlighted background colour applied, inside of a card with rounded corners. Works with both c-card--rounded and c-card--rounded--large

Example

Card Title

Lorem ipsum dolor sit amet.

Card Title

Lorem ipsum dolor sit amet.

<div class="c-card c-card--outline c-card--rounded c-card--noPadBottom">
    <h3 class="u-text-center u-spacingBottom--large">Card Title</h3>
    <p class="c-card-section c-card-section--bottom c-card-section--highlight l-centered">Lorem ipsum dolor sit amet.</p>
</div>

<div class="c-card c-card--outline c-card--rounded--large c-card--noPadBottom u-spacingTop--large">
    <h3 class="u-text-center u-spacingBottom--large">Card Title</h3>
    <p class="c-card-section c-card-section--bottom c-card-section--highlight l-centered">Lorem ipsum dolor sit amet.</p>
</div>

Card With Media Element

You can nest other types of components, such as a c-mediaElement component, within a card.

Example

Fozzie Kebab

Fozzie Kebab

Kebab Pizza

<div class="c-card c-card--outline c-card--rounded--large c-mediaElement c-mediaElement--fullstack u-text-center">
    <img class="c-mediaElement-img" src="/assets/img/examples/restaurant-logo.gif" alt="Fozzie Kebab" />
    <div class="c-mediaElement-content">
        <h1>Fozzie Kebab</h1>
        <p class="c-badge c-badge--light c-badge--large">Kebab <span></span> Pizza</p>
    </div>
</div>

Cards Within a Grid

Use cards inside a grid to create a layout.

Example

Left Outlined Card

Right Outlined Card

Content

<div class="g g--gutter g--stack--mid">
    <div class="g-col g-span4">
        <div class="c-card c-card--outline">
            <h3>Left Outlined Card</h3>
        </div>
    </div>
    <div class="g-col g-span8">
        <div class="c-card c-card--outline">
            <h3>Right Outlined Card</h3>
            <p>Content</p>
        </div>
    </div>
</div>