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.