CSS Utilities

All center

Does what it says on the tin. It center-aligns text with text-align and uses margin-inline: auto to center align on the reading mode direction.

<header class="headline all-center flow">
      <h1 class="headline__title">FAQ</h1>
                {{content | safe }}
</header>

Flow

The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.

More info

<div class="card__content flow">
        <h2 class="card__heading text-size-3">
            <a href="{{ param.url }}">{{ param.title }}</a>
        </h2>
        <p>{{  param.subhead }}</p>
    </div>

You can also use the flow-space generated utility that allows you to use the spacing design tokens. For example, If you want that last paragraph to have a Size 2 spacing, you would change the code to the following:

<article class="flow">
  <p>
    Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit
    libero, a pharetra augue.
  </p>
  <p>
    Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac
    facilisis in, egestas eget quam.
  </p>
  <p class="flow-space-size-2">
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
</article>

Region

A container that provides consistent vertical spacing for chunks/sections/regions of content.

<div class="journal__head region">
        <h1>Journal</h1>
        <p class="head__desc">Our green journals, daily of records on wildlife activities, reports from our forester, observers and our monkey writers.</p>
</div>

Visually hidden

If you hide an element with display: none, it can also hide it from assistive technology, such as screen readers. This utility allows you to get the effect of display: none, without the a11y issues.

<p class="visually-hidden">
  You can't see me, but a screen reader can still access me
</p>

Wrapper

A horizontally centered wrapper that provides a consistent central column. This should be used in all contexts where the content needs to be in the center of the page.

<div class="wrapper">
        <h1>How Tulip Works</h1>
        <div class="switcher">
          <div class="hijau-steps w-stack">
            <!-- -->
          </div>
          {% Img "https://mediacdn.hijau.xyz/stove-gas-morning.jpg", "Stove Gas Morning", [1080], "initial-project__img" %}
        </div>
</div>

You can add an exception to create a narrow wrapper, too. Add data-size="narrow" to the element and it will have a reduced width and no gutter.

<div class="wrapper" data-size="narrow">I am a reduced width wrapper</div>

You can also remove inline padding by adding data-flush.

<div class="wrapper" data-flush>I am a flush wrapper</div>