Icon cloud

An icon cloud: a row of small images — partners' logos, the Aboriginal and Torres Strait Islander flags — each the same size, a gap apart, placed left, centred or right, and each a link if it has one. Every image is drawn at the cloud's width × height in every client, Windows Outlook included, so an image should be made at that shape; one wider than its column is drawn at the column's width, its height in proportion (columnWidth, handed on by <NswColumns>), and on a phone one wider than the phone's column scales down to fit it (mobile-fluid-image), keeping the box's shape by an inline aspect-ratio (a phone client that ignores it draws the image's own shape there). Its defaults come from iconCloud in lib/icon-cloud.ts, and resolveIconCloud checks the props.

Examples

Icon cloud

Three linked images in a row, centred, as partners’ logos would sit.

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

const placeholders = ['Placeholder logo 1', 'Placeholder logo 2', 'Placeholder logo 3'].map(
  (alt) => ({
    src: 'https://digitalnsw.github.io/images/placeholder/placeholder2-1.png',
    alt,
    href: 'https://email.designsystem.nsw.gov.au',
  }),
)

function IconCloudPage({ title, align }: { title: string; align: Align }) {
  return (
    <NswLayout title={title}>
      <NswColumns background='white'>
        <NswColumn>
          <NswIconCloud icons={placeholders} align={align} />
        </NswColumn>
      </NswColumns>
    </NswLayout>
  )
};

<IconCloudPage title='Icon cloud' align='center' />

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

Icon cloud at the left

The images at the left of their row, centred on a phone.

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

const placeholders = ['Placeholder logo 1', 'Placeholder logo 2', 'Placeholder logo 3'].map(
  (alt) => ({
    src: 'https://digitalnsw.github.io/images/placeholder/placeholder2-1.png',
    alt,
    href: 'https://email.designsystem.nsw.gov.au',
  }),
)

function IconCloudPage({ title, align }: { title: string; align: Align }) {
  return (
    <NswLayout title={title}>
      <NswColumns background='white'>
        <NswColumn>
          <NswIconCloud icons={placeholders} align={align} />
        </NswColumn>
      </NswColumns>
    </NswLayout>
  )
};

<IconCloudPage title='Icon cloud at the left' align='left' />

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

Icon cloud at the right

The images at the right of their row, centred on a phone.

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

const placeholders = ['Placeholder logo 1', 'Placeholder logo 2', 'Placeholder logo 3'].map(
  (alt) => ({
    src: 'https://digitalnsw.github.io/images/placeholder/placeholder2-1.png',
    alt,
    href: 'https://email.designsystem.nsw.gov.au',
  }),
)

function IconCloudPage({ title, align }: { title: string; align: Align }) {
  return (
    <NswLayout title={title}>
      <NswColumns background='white'>
        <NswColumn>
          <NswIconCloud icons={placeholders} align={align} />
        </NswColumn>
      </NswColumns>
    </NswLayout>
  )
};

<IconCloudPage title='Icon cloud at the right' align='right' />

<IconCloudPage> 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 NswIconCloud, read from the component
Prop	Type	Default	Description
`columnWidth`	`number`	—	The width of the column the cloud sits in, handed on by `<NswColumns>`: no image is drawn wider, and Windows Outlook's copy puts as many images on a line as fit it. Set it yourself only for a cloud outside a column of the package's own; left out there, the document's content width (from `layout`).
`layout`	`Layout`	—	The layout whose content width bounds an image outside a column: the document's (handed on by `<NswLayout layout>`) unless the cloud is given one of its own, and the NSW defaults outside a document.
`mobileClass`	`string`	`mobile-center`, as the legacy's; give `''` to keep the row's own alignment	Mobile utility class(es) on the images' table, for a document's own `@media` rule: `mobile-center` centres the images on a phone, `mobile-left` keeps them at the left, and a row the phone wraps lines up the same way. Default `mobile-center`, as the legacy's; give `''` to keep the row's own alignment.
`devices`	`Devices`	—	Which devices show the images: left out, every device; `desktop` hides them on a phone (`hide-on-mobile`); `mobile` shows them on a phone only — hidden inline everywhere else, shown by the document's `.show-on-mobile` rule, and kept from Windows Outlook by `mso-hide: all` and the `<!--[if !mso]>` comments around them (see `src/lib/devices.ts`), as `<NswSocial devices>` is.
`icons` (required)	`readonly IconCloudImage[]`	—	The images, in the order they are drawn, each `{ src, alt, href? }`: its address, what it shows, and where it links, if anywhere. At least one is required.
`width`	`number`	120	Each image's width in whole px, above 0. Default 120.
`height`	`number`	60	Each image's height in whole px, above 0: every image is drawn at `width` × `height` in every client, so make the images at that shape. Default 60.
`gap`	`number`	16	The space between two images in whole px. Default 16.
`align`	`Align`	`center`	Where the images sit in their row: `left`, `center` or `right`. Default `center`.
`hover`	`string`	`hover-bg-primary-800-10`	The hover tint a linked image draws, one the document's hover stylesheet carries: `hover-bg-primary-800-10` (the link's), `hover-bg-primary-100-10` or `hover-bg-white-10` (light, for a dark fill), or a colour family's 800 tint (`hover-bg-grey-800-10`); or `''` for none. Default `hover-bg-primary-800-10`.