Typography

A block of text in one step of the NSW type scale (display-lg … label-sm), each value of which a prop can override. resolveText reads the step from typescale and validates every override; the component only draws.

Examples

Headings

A page title, a section heading and a paragraph, written as h1, h2 and p.

10.3 KB built. Open the built email (opens in a new tab)

<NswLayout title='Headings'>
  <NswColumns>
    <NswColumn>
      <NswText type='display-sm' as='h1'>
        Your application has been received
      </NswText>
      <NswText type='headline-sm' as='h2'>
        What happens next
      </NswText>
      <NswText as='p'>
        We will review your application within 10 business days and email you when a decision
        has been made.
      </NswText>
    </NswColumn>
  </NswColumns>
</NswLayout>

Typography

Every step of the NSW type scale, from display to label.

43.2 KB built. Open the built email (opens in a new tab)

const LRM = String.fromCodePoint(0x200e)

const paragraph =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec nisi sed diam ultricies tempus. Nullam et ligula sodales, blandit arcu sit amet, varius felis.' +
  LRM

const steps: ReadonlyArray<[TypeScaleName, string]> = [
  ['display-lg', 'Display Large'],
  ['display-md', 'Display Medium'],
  ['display-sm', 'Display Small'],
  ['headline-lg', 'Headline Large'],
  ['headline-md', 'Headline Medium'],
  ['headline-sm', 'Headline Small'],
  ['body-lg', paragraph],
  ['body', paragraph],
  ['body-sm', paragraph],
  ['body-xs', paragraph],
  ['label', paragraph],
  ['label-sm', 'LABEL SMALL'],
];

<NswLayout title='Typography'>
  {steps.map(([type, sample]) => (
    <Fragment key={type}>
      <NswColumns>
        <NswColumn>
          <NswText type={type} valign='middle'>
            {sample}
          </NswText>
        </NswColumn>
      </NswColumns>
      <NswColumns padding={false} background='grey-100'>
        <NswColumn>
          <NswSpacer height={24} />
        </NswColumn>
      </NswColumns>
    </Fragment>
  ))}
</NswLayout>

Props

Props of NswText, read from the component
Prop	Type	Default	Description
`background`	`ColorValue`	—	A colour behind the text block: a theme colour name (`grey-100`), a hex literal (`#f5f5f5`) or `'transparent'` (none); anything else throws (see `resolveColor`). Rendered inline (a `bgcolor` attribute plus `background-color`) so Windows Outlook paints it. Omit for none.
`mobileClass`	`string`	—	Mobile utility class(es) added to the text's element (the `div`, or the `p` or heading `as` names), for a document's own `@media` rule (e.g. `mobile-text-center`). (Legacy `mobileClass`.)
`devices`	`Devices`	—	Which devices show the text: left out, every device; `desktop` hides it on a phone (`hide-on-mobile`); `mobile` shows it on a phone only — hidden inline everywhere else, shown by the document's `.show-on-mobile` rule, and kept from Windows Outlook, which reads no `@media`, by `mso-hide: all` and the `<!--[if !mso]>` comments around it (see `src/lib/devices.ts`), exactly as `<NswSpacer devices>` is.
`defaults`	`TextDefaults`	—	The email's text settings (`<NswLayout text>`), handed down by the layout to every text-bearing primitive beneath it; the block's own props win. The walk reaches the package's own primitives wherever they stand in the tree, in children and in props that hold elements, but it cannot see inside a component of your own: give such a component the same settings you gave the layout (`text`, checked by `resolveTextDefaults`) as a prop, and hand them to the primitives it renders.
`as`	`TextElement`	`div`	The element the text is written in: `div`, `p` or a heading, `h1` to `h6`. A heading gives the text its place in the email's outline for screen readers, and is independent of `type`, which only sets how it looks. A `p` or heading has its margins zeroed inline so it draws exactly like a `div`. Default `div`.
`type`	`TypeScaleName`	`body`	The step of the NSW type scale the text is drawn in: `display-lg`, `display-md`, `display-sm`, `headline-lg`, `headline-md`, `headline-sm`, `body-lg`, `body`, `body-sm`, `body-xs`, `label` or `label-sm`. Every other prop overrides one value of that step. Default `body`.
`size`	`number`	the type step's	Font size in whole px, above 0. Default the type step's.
`weight`	`number`	the type step's	Font weight, a multiple of 100 from 100 to 900. Default the type step's.
`lineHeight`	`number`	the type step's	Line height in whole px (`24`), written in pixels because Windows Outlook ignores a unitless one. Default the type step's.
`letterSpacing`	`number \| 'normal'`	the type step's	Letter spacing in px (`-0.5`), or `'normal'`. Default the type step's.
`color`	`ColorValue`	the type step's, `primary-800` for display, headline and `label`, `grey-800` otherwise	The text colour: a theme colour name (`grey-800`) or a hex literal (`#22272b`); `'transparent'` and anything else throws (see `resolveColor`). Default the type step's, `primary-800` for display, headline and `label`, `grey-800` otherwise.
`family`	`'sans' \| 'serif' \| 'mono'`	`sans`	The face: `sans` (Public Sans), `serif` (Merriweather) or `mono` (the platform monospace). Windows Outlook loads no web font and uses the first installed face in the family's stack (Arial, Georgia or Merriweather, Consolas or Roboto Mono). Default `sans`.
`fontStyle`	`'normal' \| 'italic'`	`normal`	`italic` or `normal`. Default `normal`.
`align`	`'left' \| 'center' \| 'right'`	`left`	Horizontal alignment of the text. Default `left`.
`valign`	`'top' \| 'middle' \| 'bottom'`	`top`	Vertical alignment of the text in its cell (the cell's `valign` attribute), for a block beside a taller one. Default `top`.