BRAID
Braid Logo
 

Examples /

Marketing Banner

Heard about our latest marketing campaign?

Marketing illustration
Open in Playroom

How do I build this example for myself?

Designs like this are rarely built top-to-bottom in a single pass. Instead, they typically start very simple, with further details and refinements added in layers.To give you a sense of what this looks like, the following tutorial will guide you through the design process that you might go through when using Playroom.At any stage you can click the “Open in Playroom” button under the examples to view the design across themes and viewports.

1. Create the container and basic content

Adding the basic content up front is a great place to start, allowing us to consider the hierarchy of information as we iterate. We’ll nest the content inside a Box, and add in the Heading, Button and a Placeholder for a marketing illustration.

A `Placeholder` is only available in Playroom to support the prototyping workflow and allows you to provide a `height`, `width` and optional `label`.

Let’s give the `Placeholder` a `height` of “300” and a `label` of “Marketing illustration” to describe the purpose of reserving this space.

Heard about our latest marketing campaign?

Marketing illustration
<Box>
  <Heading level="1">Heard about our latest marketing campaign?</Heading>
  <Button>Show me</Button>
  <Placeholder height={300} label="Marketing illustration" />
</Box>
Open in Playroom

2. Lay out the content

At a high level, we can observe that this layout is being achieved using a Columns layout. Some key attributes to note:
  • Number of columns—in this case 2,
  • Space between the columns—in this case “gutter”
  • First column is wider—in this case “3/5”
<Columns space="gutter">
  <Column width="3/5">
    <Placeholder height={300} />
  </Column>
  <Column>
    <Placeholder height={300} />
  </Column>
</Columns>
Open in Playroom
We can go ahead and add this layout into our `Box` and populate the columns with the content from step 1.

Heard about our latest marketing campaign?

Marketing illustration
<Box>
  <Columns space="gutter">
    <Column width="3/5">
      <Heading level="1">Heard about our latest marketing campaign?</Heading>
      <Button>Show me</Button>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom

3. Space out the content

As in previous examples, you’ll notice that there is no space between the heading and button by default. So we’ll wrap them in a Stack component, specifying “large” space.

Heard about our latest marketing campaign?

Marketing illustration
<Box>
  <Columns space="gutter">
    <Column width="3/5">
      <Stack space="large">
        <Heading level="1">Heard about our latest marketing campaign?</Heading>
        <Button>Show me</Button>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom
In terms of spacing, we can also observe that the columns are vertically aligned to the center. We can achieve this using setting `alignY` to “center” on `Columns`.

Heard about our latest marketing campaign?

Marketing illustration
<Box>
  <Columns alignY="center" space="gutter">
    <Column width="3/5">
      <Stack space="large">
        <Heading level="1">Heard about our latest marketing campaign?</Heading>
        <Button>Show me</Button>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom

4. Add visual hierarchy

In order to make the headline stand out more, the button needs to be pushed back in terms of its visual prominence. Firstly, let’s reduce the visual weight by setting it to `weak`.

Heard about our latest marketing campaign?

Marketing illustration
<Box>
  <Columns alignY="center" space="gutter">
    <Column width="3/5">
      <Stack space="large">
        <Heading level="1">Heard about our latest marketing campaign?</Heading>
        <Button variant="ghost">Show me</Button>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom

Secondly, we can control the width of the button by using one of the layout components—in this case an Inline.

NOTE: As there is only one component inside the `Inline`, we don’t need to worry about defining the `space` between elements, so we can set `space` to `none`.

Heard about our latest marketing campaign?

Marketing illustration
<Box>
  <Columns alignY="center" space="gutter">
    <Column width="3/5">
      <Stack space="large">
        <Heading level="1">Heard about our latest marketing campaign?</Heading>
        <Inline space="none">
          <Button variant="ghost">Show me</Button>
        </Inline>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom

5. Add some colour

Now that we have our layout, let’s get our banner some attention by applying a background colour to the `Box` container. In this example, we’ll set a `background` colour of `brandAccent`.

Given we are emphasizing our banner using a coloured background, it makes sense to de-emphasize the button by applying a `neutral` tone.

Heard about our latest marketing campaign?

Marketing illustration
<Box background="brandAccent">
  <Columns alignY="center" space="gutter">
    <Column width="3/5">
      <Stack space="large">
        <Heading level="1">Heard about our latest marketing campaign?</Heading>
        <Inline space="none">
          <Button tone="neutral" variant="ghost">
            Show me
          </Button>
        </Inline>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom
It’s worth noting that, as the background colour changes, the foreground colour of the heading and button is automatically changed to improve the visual contrast. Click the “Open in Playroom” button on the code pane above to see how this behaves across different colours in different themes.

6. Adjust the space in our `Box`

Since adding the background colour, we can observe that our container is lacking some much needed breathing room around the content. This internal spacing is referred to as `padding`.

The Box component allows you to control the padding using either:

  • `padding`: all sides equally,
  • `paddingX`: left and right equally,
  • `paddingY`: top and bottom equally, or
  • `paddingLeft`/`paddingRight`/`paddingTop`/`paddingBottom`: only.

You can mix and match! So in our banner we will apply “small” spacing horizontally and “xlarge” vertically.

Heard about our latest marketing campaign?

Marketing illustration
<Box background="brandAccent" paddingX="small" paddingY="xlarge">
  <Columns alignY="center" space="gutter">
    <Column width="3/5">
      <Stack space="large">
        <Heading level="1">Heard about our latest marketing campaign?</Heading>
        <Inline space="none">
          <Button tone="neutral" variant="ghost">
            Show me
          </Button>
        </Inline>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom

Things are starting to come together now. If you click the “Open in Playroom’ button on the code block above, you’ll notice on mobile everything is a squeezed in side-by-side.

We’ll address this next.

7. Make the layout responsive

`Columns` allows us to define the device size beyond which the columns should collapse into a single vertical column. This can be done using the `collapseBelow` on `Columns` and choosing whether we want to it collapse down below “wide”, “desktop” or “tablet”.

In this case, we’ll choose “tablet”.

Heard about our latest marketing campaign?

Marketing illustration
<Box background="brandAccent" paddingX="small" paddingY="xlarge">
  <Columns alignY="center" collapseBelow="tablet" space="gutter">
    <Column width="3/5">
      <Stack space="large">
        <Heading level="1">Heard about our latest marketing campaign?</Heading>
        <Inline space="none">
          <Button tone="neutral" variant="ghost">
            Show me
          </Button>
        </Inline>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom

Now if you “Open in Playroom”, our layout is looking much more mobile friendly. Next we’ll adjust the horizontal alignment of our heading and button responsively so that it is centred on mobile.

10. Align content responsively

Alignment of both text and headings can accept responsive values, which give you more fine-grained control over what alignment should be used for each device size. Our system currently has 3 sizes: mobile, tablet, and desktop.

Currently our heading and button are left aligned, but now we can pass `align` a list of alignments—specifying what the alignment should be for each screen size.

For example: [“center”, “left”, “right”] would center the text on mobile, left align on tablet, and right align on desktop.

In this case we can specify [“center”, “left”], meaning anything tablet and above will be “left” aligned. Let’s also apply this to the `Inline` component to responsively adjust the button alignment.

Heard about our latest marketing campaign?

Marketing illustration
<Box background="brandAccent" paddingX="small" paddingY="xlarge">
  <Columns alignY="center" collapseBelow="tablet" space="gutter">
    <Column width="3/5">
      <Stack space="xlarge">
        <Heading
          align={{
            mobile: "center",
            tablet: "left",
          }}
          level="1"
        >
          Heard about our latest marketing campaign?
        </Heading>
        <Inline
          align={{
            mobile: "center",
            tablet: "left",
          }}
          space="none"
        >
          <Button tone="neutral" variant="ghost">
            Show me
          </Button>
        </Inline>
      </Stack>
    </Column>
    <Column>
      <Placeholder height={300} label="Marketing illustration" />
    </Column>
  </Columns>
</Box>
Open in Playroom

Now if you click the “Open in Playroom’ button on the code block above, our layout is scaling up pretty well from mobile through to desktop. However, you’ll notice on large screens the content spans the full width. Let’s tackle this next.

9. Constrain layout on larger screens

To provide consistent structure and aid readability, most pages constrain layouts to a maximum width—we achieve this by wrapping the content in a ContentBlock.

Note: We want to ensure that the coloured box is not constrained and extends full width, so be sure to add the `ContentBlock` inside the `Box` but around the `Columns`.

Heard about our latest marketing campaign?

Marketing illustration
<Box background="brandAccent" paddingX="small" paddingY="xlarge">
  <ContentBlock>
    <Columns alignY="center" space="gutter">
      <Column width="3/5">
        <Stack space="large">
          <Heading level="1">
            Heard about our latest marketing campaign?
          </Heading>
          <Inline space="none">
            <Button tone="neutral" variant="ghost">
              Show me
            </Button>
          </Inline>
        </Stack>
      </Column>
      <Column>
        <Placeholder height={300} label="Marketing illustration" />
      </Column>
    </Columns>
  </ContentBlock>
</Box>
Open in Playroom

10. Polish!

Now for some final spacing polish we can also leverage the same responsive technique to finesse the spacing across screen sizes.

As an example, let’s increase the vertical padding on the `Box` to “xxlarge” above mobile by setting `paddingY` to [“xlarge”, “xxlarge”]

Heard about our latest marketing campaign?

Marketing illustration
<Box
  background="brandAccent"
  paddingX="small"
  paddingY={{
    mobile: "xlarge",
    tablet: "xxlarge",
  }}
>
  <ContentBlock>
    <Columns alignY="center" collapseBelow="tablet" space="gutter">
      <Column width="3/5">
        <Stack space="xlarge">
          <Heading
            align={{
              mobile: "center",
              tablet: "left",
            }}
            level="1"
          >
            Heard about our latest marketing campaign?
          </Heading>
          <Inline
            align={{
              mobile: "center",
              tablet: "left",
            }}
            space="none"
          >
            <Button tone="neutral" variant="ghost">
              Show me
            </Button>
          </Inline>
        </Stack>
      </Column>
      <Column>
        <Placeholder height={300} label="Marketing illustration" />
      </Column>
    </Columns>
  </ContentBlock>
</Box>
Open in Playroom

And finally, we’ll also add a bit more space between the columns when they collapse on mobile devices by changing the `space` on `Columns` to [“xlarge”, “gutter”]

Heard about our latest marketing campaign?

Marketing illustration
<Box
  background="brandAccent"
  paddingX="small"
  paddingY={{
    mobile: "xlarge",
    tablet: "xxlarge",
  }}
>
  <ContentBlock>
    <Columns
      alignY="center"
      collapseBelow="tablet"
      space={{
        mobile: "xlarge",
        tablet: "gutter",
      }}
    >
      <Column width="3/5">
        <Stack space="large">
          <Heading
            align={{
              mobile: "center",
              tablet: "left",
            }}
            level="1"
          >
            Heard about our latest marketing campaign?
          </Heading>
          <Inline
            align={{
              mobile: "center",
              tablet: "left",
            }}
            space="none"
          >
            <Button tone="neutral" variant="ghost">
              Show me
            </Button>
          </Inline>
        </Stack>
      </Column>
      <Column>
        <Placeholder height={300} label="Marketing illustration" />
      </Column>
    </Columns>
  </ContentBlock>
</Box>
Open in Playroom

Next steps

Now that you are familiar with the code we have just written, this is a good chance to head over to Playroom and continue refining this design.You may want to consider:
  • Collapsing the `Columns` on screens smaller than `desktop` size rather than `tablet`. Hint: also be mindful of updating the text alignment 😉.
  • Making a list of banners, alternating the directions of the Columns