@ausbom/typography

Typography is an important part of creating visual hierarchy. The way information is presented to users is as important as the information itself.

Installation

npm install @ausbom/typography

Usage

Typography can be used via the bom-typography Sass mixin or the Typography React component. A combination of the two might also suit your project.

Sass mixin

.my-heading {
  @include bom-typography(
    $style-name: 'heading-l',
    $dark: true,
    $large: false
  )
}

Properties

<Property name="$style-name" type="string" required description="The name of the style to be applied" list={styles.join(',')} />

React component

import Typography from '@ausbom/typography'
import React from 'react'

<Typography
  as="h3"
  styleName="heading-l"
  dark
  isLarge
>
  My heading text
</Typography>