@ausbom/card

@ausbom/card

Cards represent a unit of information and can consist of a title, image, description and meta data about media.

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