@ausbom/card

@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>