Email Design System

Blockquote

A blockquote: words quoted, set apart, as the legacy's blocks/blockquotes draw them. A variant sets the look — quote (the NSW quote mark above the words, a 1px line down their left), outline (a 4px line down their left) or underline (the words in bold over a 40 × 5px bar) — and a tone and surface its colours, a step of the tone for each: the fill, the text and the line. The fill, the text's colour and the line's can each be given instead. Its defaults come from blockquote in lib/blockquote.ts, and resolveBlockquote checks the props.

Examples

Blockquote on a bright surface

The quote mark above the words and a thin line down their left, with the citation, on each family’s 600, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const cite = 'STEVE JOBS'

const blocks = tones.map((tone) => ({ tone, surface: 'bright' as const, quote, cite }));

<BlockquotePage title='Blockquote on a bright surface' blocks={blocks} />

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

Blockquote on a dark surface

The quote mark above the words and a thin line down their left, with the citation, on each family’s 800, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const cite = 'STEVE JOBS'

const blocks = tones.map((tone) => ({ tone, surface: 'dark' as const, quote, cite }));

<BlockquotePage title='Blockquote on a dark surface' blocks={blocks} />

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

Blockquote

The quote mark above the words and a thin line down their left, with the citation, on white, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const cite = 'STEVE JOBS'

const blocks = tones.map((tone) => ({ tone, quote, cite }));

<BlockquotePage title='Blockquote' blocks={blocks} />

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

Blockquote with an outline

A thick line down the left of the words, on white, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({ tone, variant: 'outline' as const, quote: quoted }));

<BlockquotePage title='Blockquote with an outline' blocks={blocks} />

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

Blockquote with an outline on a bright surface

A thick line down the left of the words, on each family’s 600, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({
  tone,
  variant: 'outline' as const,
  surface: 'bright' as const,
  quote: quoted,
}));

<BlockquotePage title='Blockquote with an outline on a bright surface' blocks={blocks} />

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

Blockquote with an outline on a dark surface

A thick line down the left of the words, on each family’s 800, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({
  tone,
  variant: 'outline' as const,
  surface: 'dark' as const,
  quote: quoted,
}));

<BlockquotePage title='Blockquote with an outline on a dark surface' blocks={blocks} />

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

Blockquote with an outline on a pale surface

A thick line down the left of the words, on each family’s 200, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({
  tone,
  variant: 'outline' as const,
  surface: 'pale' as const,
  quote: quoted,
}));

<BlockquotePage title='Blockquote with an outline on a pale surface' blocks={blocks} />

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

Blockquote on a pale surface

The quote mark above the words and a thin line down their left, with the citation, on each family’s 200, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const cite = 'STEVE JOBS'

const blocks = tones.map((tone) => ({ tone, surface: 'pale' as const, quote, cite }));

<BlockquotePage title='Blockquote on a pale surface' blocks={blocks} />

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

Blockquote with an underline

The words in bold over a short bar, on white, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({ tone, variant: 'underline' as const, quote: quoted }));

<BlockquotePage title='Blockquote with an underline' blocks={blocks} />

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

Blockquote with an underline on a bright surface

The words in bold over a short bar, on each family’s 600, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({
  tone,
  variant: 'underline' as const,
  surface: 'bright' as const,
  quote: quoted,
}));

<BlockquotePage title='Blockquote with an underline on a bright surface' blocks={blocks} />

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

Blockquote with an underline on a dark surface

The words in bold over a short bar, on each family’s 800, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({
  tone,
  variant: 'underline' as const,
  surface: 'dark' as const,
  quote: quoted,
}));

<BlockquotePage title='Blockquote with an underline on a dark surface' blocks={blocks} />

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

Blockquote with an underline on a pale surface

The words in bold over a short bar, on each family’s 200, in the grey, blue and red families.

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

function BlockquotePage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly BlockquoteProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswBlockquote {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const quote =
  'Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.'

const quoted = '“' + quote + '”'

const blocks = tones.map((tone) => ({
  tone,
  variant: 'underline' as const,
  surface: 'pale' as const,
  quote: quoted,
}));

<BlockquotePage title='Blockquote with an underline on a pale surface' blocks={blocks} />

<BlockquotePage> 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 NswBlockquote, read from the component
Prop	Type	Default	Description
`width`	`number`	—	The block's width in px. Default, in a column, that column's content width, handed on by `<NswColumns>`; otherwise the document's row width. Set it yourself only for a block outside a column of the package's own.
`layout`	`Layout`	—	The layout its rows and spacers are drawn from: the document's (handed on by `<NswLayout layout>`) unless given one of its own.
`devices`	`Devices`	—	Which devices show the block: left out, every device; `desktop` hides it on a phone; `mobile` shows it on a phone only, and never in Windows Outlook (see `src/lib/devices.ts`), as `<NswColumns devices>` is.
`defaults`	`TextDefaults`	—	The email's text settings, handed on by `<NswLayout text>`: the citation is drawn in its face. The quote keeps the serif face the block sets for it, and both keep the block's sizes and colours.
`quote` (required)	`ReactNode`	—	The words quoted: text, which may hold links or bold. Required.
`cite`	`ReactNode`	—	Who said it, under the words (`STEVE JOBS`): text, which may hold a link. Left out, or saying nothing, there is none.
`variant`	`BlockquoteVariant`	`quote`	The look: `quote` (a quote mark above the words and a thin line down their left), `outline` (a thick line down their left) or `underline` (the words in bold over a short bar). Default `quote`.
`tone`	`BlockquoteTone`	`grey`, as the legacy's	The colour family: `grey`, `primary` or `accent`. Each colour the surface sets is a step of it. Default `grey`, as the legacy's.
`surface`	`BlockquoteSurface`	`white`	The colours: `white` (a white block, the text in the tone's 800, the line in its 600, or 800 under the words), `dark` (the 800, the text in the 50, the line in the 200), `bright` (the 600, the text white, the line in the 200) or `pale` (the 200, the text in the 800, the line as on white). Default `white`.
`background`	`ColorValue`	the surface's	The block's fill: a theme colour name or a hex literal, or `'transparent'` for none. Default the surface's. Given, other than the surface's own, the words' links take no hover tint from the surface (the dark surface's light one is drawn for its own fill).
`color`	`ColorValue`	the surface's	The text's colour, and its links': a theme colour name or a hex literal. Default the surface's.
`lineColor`	`ColorValue`	the surface's	The line that marks the quote: the line down its left or the bar under it, a theme colour name or a hex literal. Default the surface's. The quote mark is an image in the surface's shade and keeps it.
`paddingY`	`number`	32	The band of the fill above and below the block, in whole px; the `underline` variant draws it above only, its bar's gap being its lower edge. `0` for none. Default 32.