Wonky Box

Like boxes, but wonky

How we design them

They can be long or short
They should never be more than one line of text on gg-layout-min-width (320px)
They should be used on .gg-u-text-speak-up and .gg-u-text-loud-bold typography only
There should not be more than one variant of wonky box on a page, so stick to either long or short, and either speak-up or loud-bold

How we use them

Apply the class gg-c-wonky-box to a <strong> element. Then use either gg-c-wonky-box__short modifier class or gg-c-wonky-box__long modifier to wonky the box.

How they look

Short wonky box

To use, add the gg-c-wonky-box__short modifier class to your <strong>. These are for use on £ amounts.

View demo

320 x 568

View code

    <section class="gg-o-page-section">
  <strong class="gg-c-wonky-box gg-c-wonky-box__short gg-u-text-loud-bold">&pound;70 off</strong>
</section>

<section class="gg-o-page-section">
  <strong class="gg-c-wonky-box gg-c-wonky-box__short gg-u-text-speak-up">&pound;70 off</strong>
</section>

Long Wonky Box

Use the gg-c-wonky-box__long modifier. These are for use with longer strings of text (but never more than one line)

View demo

320 x 568

View code

    <section class="gg-o-page-section">
  <strong class="gg-c-wonky-box gg-c-wonky-box__long gg-u-text-loud-bold">+ &pound;150 extra trade-in</strong>
</section>

<section class="gg-o-page-section">
  <strong class="gg-c-wonky-box gg-c-wonky-box__long gg-u-text-loud-bold">Lowest ever price</strong>
</section>

<section class="gg-o-page-section">
  <strong class="gg-c-wonky-box gg-c-wonky-box__long gg-u-text-speak-up">+ &pound;150 extra trade-in</strong>
</section>

<section class="gg-o-page-section">
  <strong class="gg-c-wonky-box gg-c-wonky-box__long gg-u-text-speak-up">Lowest ever price</strong>
</section>