@gov.au/card

@gov.au/card

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

Contents

• Install
• Dependency graph
• Tests
• Release History
• License

Install

yarn add @gov.au/card

npm install @gov.au/card

⬆ back to top

Dependency graph

card
└─ core

⬆ back to top

Tests

The visual test: https://auds.service.gov.au/packages/card/tests/site/

⬆ back to top

Release History

• v0.3.3 - Update core package dependency to use the latest version
• v0.3.2 - Move overflow:hidden property from the shadow class to the .au-card class
• v0.3.1 - Use unit instead of rem
• v0.3.0 - Remove AUcardBody export, add feature footers and headers, add light/dark theme variations and tests
• v0.2.0 - Remove styling for card image and use responsive media
• v0.1.4 - Remove uneccessary sass code and add comments
• v0.1.3 - Fix bug with spacing of class names in AUcard react component
• v0.1.2 - Remove console log and update naming
• v0.1.1 - Add background color to card
• v0.1.0 - 💥 Initial version

⬆ back to top

License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};

Usage

• React

⬆ back to top

React

Usage:

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

	<AUcard className="au-body">
		<img className="au-responsive-media-img" src="http://placehold.it/1200x500" />
			<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="http://placehold.it/1200x500" />
				<AUcardTitle level="2">
       	 <AUcardLink link="#" text="Some link" />
    		</AUcardTitle>
				<AUcardInner>
					<p>Card content</p>
				</AUcardInner>
		</AUcard>

All props:

<AUcard 
link="#"                     {/* Wraps the card in an anchor, with the provided link*/}
shadow={true}                {/* Adds a box shadow to the card*/}
centered={true}              {/* Centers all card content*/}
clickable={true}             {/* Makes entire card clickable if there is anchor tag that has a class of .au-card__link */}
className="additional-class" {/* An additional class, optional*/}
/>

// Card inner container 
<AUcardInner
className=""                 {/* An additional class, optional*/}
/>


// Anchor tag. Useful
<AUcardLink 
link="/card-blog"             {/*The anchor tag url*/}
text="Blog about cards"       {/*The text of the anchor tag*/}
className= ""                 {/*An additional class, optional*/}
/>

//Horizontal rule to divide content
<AUcardDivider 
className=""                 {/*An additional class, optional*/}
/>

//Footer container
<AUcardFooter
alt={false}                  {/*alt variation*/}
dark={false}                 {/*dark body variation*/}
className=""                 {/*An additional class, optional*/}
/>

//Used for feature headers
<AUcardHeader
level={3}                    {/*The desired heading level. Can be from 1 to 6. Optional*/}
alt={false}                  {/*alt variation*/}
dark={false}                 {/*dark body variation*/}
className=""                 {/*An additional class, optional*/}
/>


// Title inside cards
<AUcardTitle 
level={2}                    {/*The desired heading level. Can be from 1 to 6. Optional*/}
className=""                 {/*An additional class, optional*/}
/>