Card

v1.0.0

The card component is used to provide a brief summary of content or a task, often with a link to more detail. Cards are frequently displayed alongside other cards to group related content or tasks.

Released

History
View changes
Install
npm i @gold.au/card
Tags
Requires
Contributors
  • Petr Illek avatar picture
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Raj Ghuman avatar picture
  • Dominik Wilkowski avatar picture

Basic card

Cards are used to organise information related to a single topic. Cards can contain multiple elements, such as images, links, actions, text and more.

Example

<!-- 
    dark: <div class="au-card au-body au-body--dark">
-->

<div class="au-card">
    <div class="au-card__inner">
        <h2 class="au-card__title">Card Title</h2>
        <p>Additional text relating to the card</p>
    </div>
</div>
/*
    Light: <AUcard >
    Dark:  <AUcard dark>
    Alt:   <AUcard alt>
*/

import AUcard, { AUcardInner, AUcardTitle } from '@gold.au/card';

<AUcard>
    <AUcardInner>
        <AUcardTitle>Card Title</AUcardTitle>
        <p>Some text</p>
        <p>Additional content</p>
    </AUcardInner>
</AUcard>

Images

A card with an image. For full width images, add the img tag outside the .au-card__inner container. For images with inner padding, add the img tag inside the .au-card__inner container.

Example

<div class="au-card au-body">
    <img class="au-responsive-media-img" src="https://gold.designsystemau.org/assets/img/placeholder/600X260.png" alt />
    <div class="au-card__inner">
        <a href="#">Action</a>
    </div>
</div>
import AUcard, { AUcardInner } from '@gold.au/card';

<AUcard className="au-body">
    <img className="au-responsive-media-img" src="https://gold.designsystemau.org/assets/img/placeholder/600X260.png" alt="" />
    <AUcardInner>
        <a href="#">Action</a>
    </AUcardInner>
</AUcard>

Clickable cards

For cards that contain a single link, the hit area for that link can be made to wrap the entire card. This pattern may be used on cards that act as a preview for an article or blog post, for example. These cards could contain an image, a title and a brief summary of the article. Avoid wrapping an entire card in an anchor tag as this can be a difficult experience for a screen reader user.

Example

<!--
    shadow:  <div class="au-card au-card--shadow">
    centred:   <div class="au-card au-card--centred">
    clickable:   <div class="au-card au-card--clickable">
    anchor wrapper: <a href="#" class="au-card">
-->

<div class="au-card au-body au-card--shadow au-card--clickable">
    <img class="au-responsive-media-img" src="https://gold.designsystemau.org/assets/img/placeholder/600X260.png" alt />
    <div class="au-card__inner">
        <h3 class="au-card__title"><a class="au-card--clickable__link" href="#">Title of article</a></h3>
        <p>Some text</p>
    </div>
</div>
<!--
    shadow:  <AUcard shadow>
    centred:   <AUcard centred>
    clickable:   <AUcard clickable>
    anchor wrapper: <AUcard link="#" />
-->

import AUcard, { AUcardInner, AUcardLink, AUcardTitle } from '@gold.au/card';

<AUcard className="au-body" clickable shadow>
    <img className="au-responsive-media-img" src="https://gold.designsystemau.org/assets/img/placeholder/600X260.png" alt="" />
        <AUcardInner>
            <AUcardTitle level="3"><AUcardLink link="#" text="Title of article" /></AUcardTitle>
                <p>Some text</p>
        </AUcardInner>
</AUcard>

Card lists

Multiple cards can be used in a list to display a collection of results or articles for example.

Example

<div class="row">
    <ul class="au-card-list au-card-list--matchheight">
        <li class="col-sm-3 col-xs-6">
            <div class="au-card">
            <div class="au-card__inner">
                <div class="au-card__title">
                        <h2>Card 1</h2>
                </div>
                <p>Some text</p>
                <p>Additional text</p>
            </div>
        </div>
        </li>
        <li class="col-sm-3 col-xs-6">
            <div class="au-card">
            <div class="au-card__inner">
                <div class="au-card__title">
                        <h2>Card 2</h2>
                </div>
                <p>Some text</p>
                <p>Additional text</p>
                <p>More text</p>
            </div>
        </div>
        </li>
    </ul>
</div>
import AUcard, { AUcardInner } from '@gold.au/card';

<div class="row">
    <ul className="au-card-list au-card-list--matchheight">
            <li className="col-sm-3 col-xs-6">
                <AUcard>
                    <AUcardInner>
                            <h3>Card 1</h3>
                    </AUcardInner>
                </AUcard>
            </li>
            <li className="col-sm-3 col-xs-6">
                <AUcard>
                    <AUcardInner>
                            <h3>Card 2</h3>
                    </AUcardInner>
                </AUcard>
            </li>
    </ul>
</div>

Feature headers

Use feature headers to give the card heading more visual prominence.

Example

<!-- 
    light: <div class="au-card__header"><h2>
    alt:  <div class="au-body au-body--alt au-card__header"><h2>...</h2></div>
    dark: <div class="au-body au-body--dark au-card__header"><h2>...</h2></div>
-->

<div class="au-card au-card--centred au-body">
<div class="au-body au-body--alt au-card__header">
    <h4>Feature card title</h4>
</div>
    <div class="au-card__inner">
        <p> Additional conent relating to the card</p>
    </div>
</div>
/*
    Light: <AUcardHeader>
    Dark:  <AUcardHeader dark>
    Alt:   <AUcardHeader alt>
*/

import AUcard, { AUcardInner, AUcardHeader } from '@gold.au/card';

<AUcard className="au-body">
    <AUcardInner>
        <AUcardHeader level="3">Card Title</AUcardHeader>
        <p>Some text</p>
        <p>Additional content</p>
    </AUcardInner>
</AUcard>

Feature footers

Use feature footers to give the card footer more visual prominence. This can be used to guide users to the call to action.

Example

<!-- 
    light: <div class="au-card__footer">
    alt: <div class="au-card__footer au-body au-body--alt">
    dark: <div class="au-card au-body au-body--dark">
-->

<div class="au-card au-body">
    <div class="au-card__inner">
        <h3 class="au-card__title">Card title</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, voluptatibus.</p>
    </div>
    <div class="au-card__footer">
        <a href="#">Action</a>
    </div>
</div>
/*
    Light: <AUcardFooter>
    Dark:  <AUcardFooter dark>
    Alt:   <AUcardFooter alt>
*/

import AUcard, { AUcardInner, AUcardFooter, AUcardTitle } from '@gold.au/card';

<AUcard className="au-body">
    <AUcardInner>
        <AUcardTitle level="3">Card Title</AUcardTitle>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, voluptatibus.</p>
    </AUcardInner>
    <AUcardFooter alt>
        <a href="#">Action</a>
    </AUcardFooter>
</AUcard>