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
  • Trevor Brennan avatar picture
  • Petr Illek avatar picture
  • Raj Ghuman avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Gary Broadbent avatar picture

React Usage

import AUcard, { AUcardInner, AUcardDivider, AUcardLink, AUcardHeader, AUcardTitle, AUcardFooter } 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>
            <span>Image caption or description</span>
        <AUcardFooter>
            <a href="#">Call to action</a>
        </AUcardFooter>
    </AUcardInner>
</AUcard>

//Entire card clickable and single anchor:
<AUcard class="au-body">
    <img className="au-responsive-media-img" src="https://gold.designsystemau.org/assets/img/placeholder/600X260.png" alt="" />
    <AUcardInner>
    <AUcardTitle level="2">
        <AUcardLink link="#" text="Some link" />
    </AUcardTitle>
    </AUcardInner>
</AUcard>

Props

AUcard

Prop name Type Description
link string Link of where the card goes to. Should only be used when card has minimal content.
shadow boolean The table column header title text
centred boolean Centre the contents of the table
clickable boolean Makes the entire contents of the card clickable, provided there is an <AUcardLink> component is a child of the <AUcard>
alt bool The alt variation
dark bool The dark variation
className string An additional class, optional

AUcardInner

Prop name Type Description
className string An additional class, optional
Prop name Type Description
link string Source code
text string Source of the image
className string An additional class, optional

AUcardDivider

Prop name Type Description
className string An additional class, optional

AUcardFooter

Prop name Type Description
alt bool The alt variation
dark bool The dark variation
className string An additional class, optional

AUcardHeader

(Feature header)

Prop name Type Description
level string The heading level of the title inside the header, optional. Between 1-6
alt bool The alt variation
dark bool The dark variation
className string An additional class, optional

AUcardTitle

Prop name Type Description
level string The heading level of the title inside the header. Between 1-6
className string An additional class, optional

AUcardHeader

Prop name Type Description
className string An additional class, optional

All other props are spread into the component

Exports

Name Type Description
AUcard default The AUcard component
AUcardInner named An inner container with padding
AUcardDivider named A horizontal rule to seperate contents in a card
AUcardLink named The AUcardLink component
AUcardTitle named The body container
AUcardHeader named The body container
AUcardFooter named The footer of the card

node_modules import

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

pancake import

import AUcard, { AUcardInner, AUcardDivider, AUcardLink, AUcardHeader, AUcardTitle, AUcardFooter } from './card.js';

Related components

Feedback