Card
v1.0.0The 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
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>