Logo

The NSW Government logo: one of the brand's own images (logo.tones) at a width, placed left, centred or right, optionally linked. Its defaults come from logo in lib/logo.ts, and resolveLogo checks the props.

Examples

Logo

The NSW Government logo in each of its six versions, on light and dark rows.

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

function LogoPage({
  title,
  logos,
}: {
  title: string
  logos: ReadonlyArray<{ key: string; dark?: boolean; logo: ReactNode }>
}) {
  return (
    <NswLayout title={title}>
      {logos.map(({ key, dark, logo }) => (
        <Fragment key={key}>
          <NswColumns background={dark ? 'grey-800' : 'white'}>
            <NswColumn>
              <NswSpacer height={32} />
              {logo}
              <NswSpacer height={32} />
            </NswColumn>
          </NswColumns>
          <NswColumns padding={false} background='grey-100'>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones: ReadonlyArray<{ tone: LogoTone; dark: boolean }> = [
  { tone: 'primary', dark: false },
  { tone: 'reversed', dark: true },
  { tone: 'black', dark: false },
  { tone: 'white', dark: true },
  { tone: 'rainbow', dark: false },
  { tone: 'rainbowReversed', dark: true },
];

<LogoPage
  title='Logo'
  logos={tones.map(({ tone, dark }) => ({
    key: tone,
    dark,
    logo: <NswLogo tone={tone} align='left' />,
  }))}
/>

<LogoPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Logo position

The logo at the left, centre and right of its row, centred on a phone.

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

function LogoPage({
  title,
  logos,
}: {
  title: string
  logos: ReadonlyArray<{ key: string; dark?: boolean; logo: ReactNode }>
}) {
  return (
    <NswLayout title={title}>
      {logos.map(({ key, dark, logo }) => (
        <Fragment key={key}>
          <NswColumns background={dark ? 'grey-800' : 'white'}>
            <NswColumn>
              <NswSpacer height={32} />
              {logo}
              <NswSpacer height={32} />
            </NswColumn>
          </NswColumns>
          <NswColumns padding={false} background='grey-100'>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const positions: readonly Align[] = ['left', 'center', 'right'];

<LogoPage
  title='Logo position'
  logos={positions.map((align) => ({ key: align, logo: <NswLogo align={align} /> }))}
/>

<LogoPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Logo size

The logo at five widths, from 48 to 88px, its height following its shape.

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

function LogoPage({
  title,
  logos,
}: {
  title: string
  logos: ReadonlyArray<{ key: string; dark?: boolean; logo: ReactNode }>
}) {
  return (
    <NswLayout title={title}>
      {logos.map(({ key, dark, logo }) => (
        <Fragment key={key}>
          <NswColumns background={dark ? 'grey-800' : 'white'}>
            <NswColumn>
              <NswSpacer height={32} />
              {logo}
              <NswSpacer height={32} />
            </NswColumn>
          </NswColumns>
          <NswColumns padding={false} background='grey-100'>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const widths = [48, 58, 68, 78, 88];

<LogoPage
  title='Logo size'
  logos={widths.map((width) => ({
    key: String(width),
    logo: <NswLogo width={width} align='left' />,
  }))}
/>

<LogoPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Props

Props of NswLogo, read from the component
Prop	Type	Default	Description
`mobileClass`	`string`	`mobile-center`, which centres the logo on a phone wherever it sits on a desktop, as the legacy's does	Mobile utility class(es) on the logo's wrapper, for a document's own `@media` rule. Default `mobile-center`, which centres the logo on a phone wherever it sits on a desktop, as the legacy's does.
`devices`	`Devices`	—	Which devices show the logo: left out, every device; `desktop` hides it on a phone; `mobile` shows it on a phone only. Handed to the image it is drawn as, which carries the class and the Outlook half (see `<NswImg devices>`).
`tone`	`LogoTone`	`primary`	The version of the logo: `primary`, `black` or `rainbow` for a light background; `reversed`, `white` or `rainbowReversed` (white lettering) for a dark one. Default `primary`.
`width`	`number`	`logo.width` (64)	The width in whole px, above 0; the height follows the logo's shape (518 × 560). Default `logo.width` (64).
`alt`	`string`	`NSW Government logo`	What the logo is, read in its place and shown when it does not load. Give `''` only where the logo is decoration beside the same name in text; a linked logo needs text, since the link is named by it. Default `NSW Government logo`.
`href`	`string`	none	Where the logo links to: an address `resolveHref` accepts. Default none.
`align`	`Align`	`center`	Where the logo sits in its row: `left`, `center` or `right`. Default `center`.