---
name: Promos
menu: Patterns
parent: Modules
route: /patterns/promos
---

# Promos

## Boombox

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

```specimen-react
<Boombox>
  <Heading size="hippo">Loud announcement</Heading>
  <CtaButton purpose="primary">
    Call to action box
  </CtaButton>
</Boombox>
```

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

### Props

- **backgroundColor** - background colour for the entire component
- **curvedTop** - if true, the component will have a curved top edge
- **curvedBottom** - if true, the component will have a curved bottom edge

## Tupperware

Tupperware presents content in small portions, laid out in a grid. Its purpose is to support the main content of the page by providing additional information. Each tile can have an image, and/or optional accompanying text. In narrow containers tupperware is laid out vertically.

## Basic Tupperware (Horizontal layout)

**Tupperware** uses **Tub** subcomponents. These can contain any kind of flow content. Only the `imageURL` prop is required on a **Tub**.

```specimen-react
// Note that we have to use `Tub` in this example, in code you should just use `Tub`
<Tupperware>
  <Tub imageURL="https://i.imgur.com/hQ07xYB.png">
    <Text bold>Green energy</Text>
    <Text>100% renewable energy and 10% renewable gas.</Text>
  </Tub>
  <Tub imageURL="https://i.imgur.com/hLnPv0k.png">
    <Text bold>Easy switch.</Text>
    <Text>No need to talk to your old supplier, we'll let them know.</Text>
  </Tub>
  <Tub imageURL="https://i.imgur.com/nvCiUzu.png">
    <Text bold>No exit fees</Text>
    <Text>Switch at any time, and you're not tied to any contract.</Text>
  </Tub>
</Tupperware>
```

### The `itemWidth` prop

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.

### The `imageMaxHeight` prop

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.

```
// Note that we have to use `Tub` in this example, in code you should just use `Tub`
<Tupperware imageMaxHeight="4rem">
  <Tub imageURL="https://i.imgur.com/hQ07xYB.png">
    <Text bold>Green energy</Text>
    <Text>100% renewable energy and 10% renewable gas.</Text>
  </Tub>
  <Tub imageURL="https://i.imgur.com/hLnPv0k.png">
    <Text bold>Easy switch.</Text>
    <Text>No need to talk to your old supplier, we'll let them know.</Text>
  </Tub>
  <Tub imageURL="https://i.imgur.com/nvCiUzu.png">
    <Text bold>No exit fees</Text>
    <Text>Switch at any time, and you're not tied to any contract.</Text>
  </Tub>
</Tupperware>
```

## Vertical Tupperware (the `vertical` prop)

By placing the `vertical` prop on **Tupperware**, you force the items to be arranged vertically at all screen widths (like they are on mobile anyway).

```specimen-react
// Note that we have to use `Tub` in this example, in code you should just use `Tub`
<Tupperware vertical>
  <Tub imageURL="https://i.imgur.com/hQ07xYB.png">
    <Text bold>Green energy</Text>
    <Text>100% renewable energy and 10% renewable gas.</Text>
  </Tub>
  <Tub imageURL="https://i.imgur.com/hLnPv0k.png">
    <Text bold>Easy switch.</Text>
    <Text>No need to talk to your old supplier, we'll let them know.</Text>
  </Tub>
  <Tub imageURL="https://i.imgur.com/nvCiUzu.png">
    <Text bold>No exit fees</Text>
    <Text>Switch at any time, and you're not tied to any contract.</Text>
  </Tub>
</Tupperware>
```

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

## The `size` prop in Tub

It's possible to select a font size for Tub text, the default is `snail`

## Tupperware with IconTub children

Tupperware can also be used to render the text with an icon using the `IconTub` component.

```specimen-react
// Note that we have to use `Tub` in this example, in code you should just use `Tub`
<Tupperware>
  <IconTub name="turbine">
    <Text bold>Green energy</Text>
    <Text>100% renewable energy and 10% renewable gas.</Text>
  </IconTub>
  <IconTub name="elec">
    <Text bold>Easy switch.</Text>
    <Text>No need to talk to your old supplier, we'll let them know.</Text>
  </IconTub>
  <IconTub name="fees">
    <Text bold>No exit fees</Text>
    <Text>Switch at any time, and you're not tied to any contract.</Text>
  </IconTub>
</Tupperware>
```

## Vertical Tupperware with IconTub children

```specimen-react
// Note that we have to use `Tub` in this example, in code you should just use `Tub`
<Tupperware vertical>
  <IconTub name="turbine">
    <Text bold>Green energy</Text>
    <Text>100% renewable energy and 10% renewable gas.</Text>
  </IconTub>
  <IconTub name="elec">
    <Text bold>Easy switch.</Text>
    <Text>No need to talk to your old supplier, we'll let them know.</Text>
  </IconTub>
  <IconTub name="fees">
    <Text bold>No exit fees</Text>
    <Text>Switch at any time, and you're not tied to any contract.</Text>
  </IconTub>
</Tupperware>
```
