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.
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 to apply to the Tupperware container. The string is a magic spacing string, e.g.
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.
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
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.
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.
This prop is forwarded to the direct children of the
Tub. Use it to set the
size of child
<Text /> components.
The name of an icon.
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.
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.
The width of the icon. Mutually exclusive with
The height of the icon. Mutually exclusive with
Boombox is used for visually prominent and "loud" sections. It contains larger body text and a call to action.
marked for review - Boombox should be opinionated about the size of the text that is contained.
Background colour for the entire component.
If true, the component will have a curved top edge.
If true, the component will have a curved bottom edge.