@ausbom/card

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

Cards without an image must use a title and description text as mandatory fields. Use this card type sparingly for specific components, such as a group of child links. The description has a maximum 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>