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 />` 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.