@ausbom/card

@ausbom/card

Cards represent a unit of information and can consist of a title, image and description.

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>

Media cards represent a piece of media and can consist of a title, image and meta data about the media.

Installation

npm install @ausbom/card

Usage

import { MediaCard } from '@ausbom/card'
import React from 'react'
import image from './image.png'
import ExternalLink16 from '@ausbom/icon/lib/icons/system/ExternalLink16'

<MediaCard
  id="card1"
  title="Card title"
  image={(<img src="/my/image" />)}
  meta={['2 mins read', '25 Jun 2019']}
  href="/link/to/media"
/>