Promos

Tupperware

Tupperware presents content in small portions, laid out horizontally or vertically. Its purpose is to support the main content of the page by providing additional information.

Each tile can have an image or icon, and/or optional accompanying text.

Tupperware uses Tub subcomponents when using images, or IconTub subocomponents when using icons. Tubs can contain any kind of flow content.

Tupperware with images

Tupperware with icons

Horizontal tupperware

Vertical tupperware

<Tupperware /> props

layout auto | vertical | horizontal

auto layout is the default. This layout uses the horizontal layout on large screens, and switches to vertical on smaller screens.

Note: To make the text line up along the left edge in vertical layouts, each image must have the same width. You may or may not want this aesthetic; different sizes may look attractive under some circumstances.

spacing string

Spacing to apply to the Tupperware container. The string is a magic spacing string, e.g. mb-earth.

itemWidth string

This lets you control the width of each item. Where there are too many items to fit in one row, the items are shrunk accordingly — except for mobile where they are arranged vertically anyway.

<Tub /> props

imageURL string

Required. The URL of the image to use in the Tub. If you want to use an icon instead, use an IconTub instead of a Tub.

alt string

The alternative text of the Tub image. If your image is decorative, it's fine to omit this, the empty string will be used by default.

imageMaxHeight string

This lets you set a specific height for the images so that the text starts on the same horizontal line across the Tub items. This is not needed where images are curated to have a matching height.

size snail | mouse | otter | dolphin | hippo | mammoth

This prop is forwarded to the direct children of the Tub. Use it to set the size of child <Text /> components.

<IconTub /> props

name IconName

The name of an icon.

alt string

The alternative text of the icon. If your icon is decorative, it's fine to omit this, the empty string will be used by default.

color string

The CSS colour of the icon.

iconSize moon | mars | earth | saturn | sun | snail | mouse | otter | dolphin | hippo | mammoth | whale | string

The size of the icon.

iconWidth string

The width of the icon. Mutually exclusive with iconSize.

iconHeight string

The height of the icon. Mutually exclusive with iconSize.

Boombox

Boombox is used for visually prominent and "loud" sections. It contains larger body text and a call to action.

⚠️ Warning:

marked for review - Boombox should be opinionated about the size of the text that is contained.

<Boombox /> props

backgroundColor string

Background colour for the entire component.

curvedTop boolean

If true, the component will have a curved top edge.

curvedBottom boolean

If true, the component will have a curved bottom edge.