This has been deprecated and will be removed in a future release

Copy boxes

These are the boxes where the words go


How we use them

  • Copy boxes can only be black with white text
  • Only use “boing” marks at the start of journey and in key moments e.g upsells and page titles
  • Keep the copy simple and short, avoid multiple lines in a single copy box
  • The edges of the copy box should be close to the text
  • “Boing” marks must always be centred
  • If you’re using multiple copy boxes:
    • Don’t show them side by side. Looks a bit weird. Use one copy box per line
    • Only the first copy box in a group should have “boing” marks. Also, don’t overdo your “boings”

Note: The copy box is created around a CSS clippath. This works in all browsers, excluding Internet Explorer and Edge. In those cases it’ll pop up as a rectangle.

How they look

1. Copy box with “boings”

<div class="c-copy-box">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="208.3 -.41 99.15 25.16" class="c-copy-box__boing">
    <path d="M300.04 19.53l6.78-15.7c.63-1.46-1.52-2.74-2.16-1.26l-6.78 15.74c-.63 1.46 1.52 2.74 2.16 1.26z"/>
    <path d="M219.23 22.08l-8.07-16.5c-.71-1.44-2.86-.18-2.16 1.26l8.07 16.47c.71 1.44 2.86.18 2.16-1.26z" />
    <path d="M260.58 19.38l-.9-18.18c-.08-1.6-2.58-1.61-2.5 0l.9 18.18c.08 1.6 2.58 1.61 2.5 0z" />
  </svg>
  <div class="c-copy-box__outline">
    <div class="c-copy-box__body">
      <h1 class="gg-u-text-louder">Your message here</h1>
    </div>
  </div>
</div>

2. Copy box without “boings”

<div class="c-copy-box">
  <div class="c-copy-box__outline">
    <div class="c-copy-box__body">
      <h2 class="gg-u-text-loud">Your message here</h2>
    </div>
  </div>
</div>