@ausbom/card
Image cards can have the variation of title alone, description alone, or both together. Horiztonal tiled images have an aspect ratio of 16:9, vertical images have an aspect ratio of 2:4. Images must be photographs, not charts, with no white backgrounds.
When cards don’t include an image they should use a title with description text as mandatory fields.
They also include an arrow to indicate it is clickable.
Use this card type sparingly for specific components, such as a group of child links. The description has a max of 160 characters.
Installation
npm install @ausbom/card
Usage
import Card from '@ausbom/card'
import React from 'react'
import image from './image.png'
import ExternalLink16 from '@ausbom/icon/lib/icons/system/ExternalLink16'
<Card
image={(<img src={image} alt="placeholder alt text" />)}
title="Card with image and no text"
id="card-image-1"
href="#"
/>
<Card
title="Gender Equality"
id="card-image-2"
href="/gender-equality"
titleTag="h4"
icon={ExternalLink16}
>
<p>The Bureau strives to be the model of an inclusive culture where diversity is valued to provide better outcomes for our people, customers and the community. </p>
</Card>