<commit_before>@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](#install)
* [Dependency graph](#dependency-graph)
* [Tests](#tests)
* [Release History](#release-history)
* [License](#license)


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Install


```shell
yarn add @gov.au/card
```

```shell
npm install @gov.au/card
```


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Dependency graph

```shell
card
└─ core
```


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Tests

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


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Release History

* v0.1.1 - Add background color to card
* v0.1.0 - 💥 Initial version


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## License

Copyright (c) Commonwealth of Australia.
Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/packages/core/master/LICENSE).


**[⬆ back to top](#contents)**

# };

## Usage


* [React](#react)


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------

### React

Usage:

```jsx
	<AUcard className="au-body">
		<AUcardImage 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">
			<AUcardImage src="http://placehold.it/1200x500" />
				<AUcardInner>
						<h3 className="au-card__title"><AUcardLink link="#" text="Some link" /></h3>
				</AUcardInner>
		</AUcard>



```

All props:

```jsx

<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*/}
/>

//Card image
<AUcardImage <commit_msg>remove spacing on card readme<commit_after>@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](#install)
* [Dependency graph](#dependency-graph)
* [Tests](#tests)
* [Release History](#release-history)
* [License](#license)


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Install


```shell
yarn add @gov.au/card
```

```shell
npm install @gov.au/card
```


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Dependency graph

```shell
card
└─ core
```


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Tests

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


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Release History

* v0.1.1 - Add background color to card
* v0.1.0 - 💥 Initial version


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## License

Copyright (c) Commonwealth of Australia.
Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/packages/core/master/LICENSE).


**[⬆ back to top](#contents)**

# };

## Usage


* [React](#react)


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------

### React

Usage:

```jsx
	<AUcard className="au-body">
		<AUcardImage 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">
			<AUcardImage src="http://placehold.it/1200x500" />
				<AUcardInner>
						<h3 className="au-card__title"><AUcardLink link="#" text="Some link" /></h3>
				</AUcardInner>
		</AUcard>
```

All props:

```jsx

<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*/}
/>

//Card image
<AUcardImage 
{'fraction_non_alphanumeric': 0.42444339175746093, 'fraction_numerical': 0.006947734091267962, 'mean_word_length': 1.1500339443312966, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2723793', 'n_tokens_mistral': 1657, 'n_tokens_neox': 1459, 'n_words': 402}