Tickster Styleguide

Appearance

v2.21.0

Gap ​

When to use it ​

The Gap utility adds or removes spacing between items in Grid and Flex containers. Use it when you want consistent gutters, overriding any existing default gap value.

Variants ​

  • General gap: .u-gap--[none|xs|s|m|l|xl|xxl] to set the spacing between direct children. These map to the design tokens --space-*.

What it looks like ​

Code examples ​

html
<div class="o-flex u-gap--m">
  <div class="c-box c-box--info">A</div>
  <div class="c-box c-box--info">B</div>
  <div class="c-box c-box--info">C</div>
</div>
html
<div class="o-grid o-grid--auto u-gap--xl">
  <div class="c-box c-box--info">1</div>
  <div class="c-box c-box--info">2</div>
  <div class="c-box c-box--info">3</div>
</div>
html
<div class="o-flex u-gap--none">
  <div class="c-box c-box--info">Tight 1</div>
  <div class="c-box c-box--info">Tight 2</div>
</div>

Accessibility notes ​

Using gap to space items doesn’t affect the DOM order or focus order, which is preferred over inserting empty elements for spacing. Keep a logical DOM order and rely on layout utilities like Gap for visual rhythm.