@gov.au/card

A container for all types of content

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@gov.au/card
739910.3.33 years ago5 years agoMinified + gzip package size for @gov.au/card in KB

Readme

@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

```shell yarn add @gov.au/card ``` ```shell npm install @gov.au/card ``` ⬆ back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Dependency graph

```shell 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

⬆ back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------

React

Usage: ```jsx 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: ```jsx 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-cardlink /} className="additional-class" {/ An additional class, optional/} /> // Card inner container An additional class, optional/} /> // Anchor tag. Useful The anchor tag url/} text="Blog about cards" {/The text of the anchor tag/} className= "" {/An additional class, optional/} /> //Horizontal rule to divide content An additional class, optional/} /> //Footer container alt variation/} dark={false} {/dark body variation/} className="" {/An additional class, optional/} /> //Used for feature headers 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 The desired heading level. Can be from 1 to 6. Optional/} className="" {/An additional class, optional/} /> ```