demo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Neblula CSS - Demo</title>
  <link href="main.css" rel="stylesheet">
</head>
<body>
  <div class="o-site-wrap o-site-wrap--padding">
    <div class="o-section-md">
      <h1>Nebula CSS &mdash; Demo</h1>
      <p><a href="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/rbrtsmith/nebula-css">Github Repository & Documentation</a>
      <p>ITCSS and BEMIT based Sass/CSS framework that is ultra exensible and scales to any project size.</p>
      <p>You are encouraged to use your browser dev tools to see what markup structure these components require</p>
      <p><strong>Note:</strong> Anything prefixed with <code>demo-</code> is for demonstration purposes only and does not ship with the framework</p>
      <h2>Install via NPM</h2>
      <pre><code>yarn add nebula-css</code></pre>
    </div>
  </div>

  <div class="o-section o-section-md">
    <nav class="o-site-wrap o-site-wrap--padding">
      <ul class="o-matrix-list o-matrix-list-md u-text-center">
        <li class="o-matrix-list__item">
          <a href="#site-wrap" class="c-demo-button">Site wrap</a>
        </li>
        <li class="o-matrix-list__item">
          <a href="#grid" class="c-demo-button">Grid</a>
        </li>
        <li class="o-matrix-list__item">
          <a href="#section" class="c-demo-button">Section</a>
        </li>
        <li class="o-matrix-list__item">
          <a href="#flag" class="c-demo-button">Flag</a>
        </li>
        <li class="o-matrix-list__item">
          <a href="#lists" class="c-demo-button">Lists</a>
        </li>
        <li class="o-matrix-list__item">
          <a href="#utilities" class="c-demo-button">Utilities</a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="o-site-wrap o-site-wrap--padding">
    <section class="o-section-md" id="site-wrap">
      <h2>Site-wrap</h2>
      <p>Site-wrap wraps content to a max width and centers it horizontally, typically used to wrap a site's content like you witness in this demo.</p>
      <p><code>--padding</code> modifier adds left and right padding.
      <div class="c-demo-card">
        <div class="o-site-wrap o-site-wrap--padding">
          Site wrap with padding modifier.
        </div>
      </div>
    </section>

    <section class="o-section-md" id="grid">
      <h2>Grid</h2>
      <h4>Widths</h4>
      <p><em>Fractional based grid contains one-whole, halves, thirds, quarters, fifths, sixths, eighths, tenths, twelfths.</em></p>

      <div class="u-push-bottom-md">
        <div class="o-grid o-grid--gutter-md o-grid--matrix">
          <div class="o-grid__item u-1/1">
            <div class="c-demo-card">
              1/1
            </div>
          </div>
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              1/2
            </div>
          </div>
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              1/2
            </div>
          </div>
          <div class="o-grid__item u-1/3">
            <div class="c-demo-card">
              1/3
            </div>
          </div>
          <div class="o-grid__item u-2/3">
            <div class="c-demo-card">
              2/3
            </div>
          </div>
          <div class="o-grid__item u-1/4">
            <div class="c-demo-card">
              1/4
            </div>
          </div>
          <div class="o-grid__item u-3/4">
            <div class="c-demo-card">
              3/4
            </div>
          </div>
          <div class="o-grid__item u-1/5">
            <div class="c-demo-card">
              1/5
            </div>
          </div>
          <div class="o-grid__item u-4/5">
            <div class="c-demo-card">
              4/5
            </div>
          </div>
          <div class="o-grid__item u-2/5">
            <div class="c-demo-card">
              2/5
            </div>
          </div>
          <div class="o-grid__item u-3/5">
            <div class="c-demo-card">
              3/5
            </div>
          </div>
          <div class="o-grid__item u-1/6">
            <div class="c-demo-card">
              1/6
            </div>
          </div>
          <div class="o-grid__item u-5/6">
            <div class="c-demo-card">
              5/6
            </div>
          </div>
          <div class="o-grid__item u-1/8">
            <div class="c-demo-card">
              1/8
            </div>
          </div>
          <div class="o-grid__item u-7/8">
            <div class="c-demo-card">
              7/8
            </div>
          </div>
          <div class="o-grid__item u-3/8">
            <div class="c-demo-card">
              3/8
            </div>
          </div>
          <div class="o-grid__item u-5/8">
            <div class="c-demo-card">
              5/8
            </div>
          </div>
          <div class="o-grid__item u-1/10">
            <div class="c-demo-card">
              1/10
            </div>
          </div>
          <div class="o-grid__item u-9/10">
            <div class="c-demo-card">
              9/10
            </div>
          </div>
          <div class="o-grid__item u-3/10">
            <div class="c-demo-card">
              3/10
            </div>
          </div>
          <div class="o-grid__item u-7/10">
            <div class="c-demo-card">
              7/10
            </div>
          </div>
          <div class="o-grid__item u-1/12">
            <div class="c-demo-card">
              1/12
            </div>
          </div>
          <div class="o-grid__item u-11/12">
            <div class="c-demo-card">
              11/12
            </div>
          </div>
          <div class="o-grid__item u-5/12">
            <div class="c-demo-card">
              5/12
            </div>
          </div>
          <div class="o-grid__item u-7/12">
            <div class="c-demo-card">
              7/12
            </div>
          </div>
        </div>
      </div>
    </section>

    <h3 id="width-breakpoints">Width breakpoints</h3>
    <div class="o-grid o-grid--matrix o-grid--gutter-md">
      <div class="o-grid__item u-1/2@sm">
        <div class="c-demo-card">
          1/2@sm
        </div>
      </div>
      <div class="o-grid__item u-1/2@sm">
        <div class="c-demo-card">
          1/2@sm
        </div>
      </div>
      <div class="o-grid__item u-1/2@md">
        <div class="c-demo-card">
          1/2@md
        </div>
      </div>
      <div class="o-grid__item u-1/2@lg">
        <div class="c-demo-card">
          1/2@lg
        </div>
      </div>
    </div>

    <div class="o-section-md">
      <h3 id="gutters">Gutters</h3>
      <p>By default there are no gutters.</p>
      <div class="u-push-bottom-md">
        <div class="o-grid">
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              1
            </div>
          </div>
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              2
            </div>
          </div>
        </div>
      </div>
      <h3>Small</h3>
      <div class="u-push-bottom-md">
        <div class="o-grid o-grid--gutter-sm">
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              sm
            </div>
          </div>
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              sm
            </div>
          </div>
        </div>
      </div>

      <h3>Medium</h3>
      <div class="u-push-bottom-md">
        <div class="o-grid o-grid--gutter-md">
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              md
            </div>
          </div>
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              md
            </div>
          </div>
        </div>
      </div>

      <h3>Large</h3>
      <div class="u-push-bottom-md">
        <div class="o-grid o-grid--gutter-lg">
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              lg
            </div>
          </div>
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              lg
            </div>
          </div>
        </div>
      </div>

      <h3>Varying gutter sizes mapped to breakpoints</h3>
      <div class="u-push-bottom-md">
        <div class="o-grid o-grid--gutter-sm@sm o-grid--gutter-md@md o-grid--gutter-lg@lg">
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              sm@sm md@md lg@lg
            </div>
          </div>
          <div class="o-grid__item u-1/2">
            <div class="c-demo-card">
              sm@sm md@md lg@lg
            </div>
          </div>
        </div>
      </div>

      <h3 id="grid-matrix">Matrix</h3>
      <p>Provides vertical gutters that match whatever horizontal gutter is specified.</p>
      <div class="o-grid o-grid--gutter-md o-grid--matrix">
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            2
          </div>
        </div>
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            3
          </div>
        </div>
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            4
          </div>
        </div>
      </div>
    </p>

    <div id="grid-equal-height" class="o-section-md">
      <h3 id="grid-equal-height">Equal height</h3>
      <div class="o-grid o-grid--gutter-md o-grid--equal-height">
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla nesciunt voluptatem asperiores culpa quasi autem placeat commodi explicabo sit ipsum at eaque, voluptatum necessitatibus aperiam nam ullam maiores harum, iure.
          </div>
        </div>
      </div>
    </div>

    <div id="grid-reverse" class="o-section-md">
      <h3>Reverse</h3>
      <div class="o-grid o-grid--gutter-md o-grid--reverse">
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            2
          </div>
        </div>
      </div>
    </div>

    <div id="grid-vertically-centered" class="o-section-md">
      <h3>Vertically centered</h3>
      <div class="o-grid o-grid--gutter-md o-grid--center">
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eaque rem ab modi quaerat tempore asperiores quos nobis quasi! Ad voluptatibus nobis repellat nemo impedit aperiam repudiandae ullam magni aliquid!
          </div>
        </div>
      </div>
    </div>

    <div class="o-section-md">
      <h3 id="grid-bottom-aligned">Bottom aligned</h3>
      <div class="o-grid o-grid--gutter-md o-grid--bottom">
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/2">
          <div class="c-demo-card">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eaque rem ab modi quaerat tempore asperiores quos nobis quasi! Ad voluptatibus nobis repellat nemo impedit aperiam repudiandae ullam magni aliquid!
          </div>
        </div>
      </div>
    </div>

    <div class="o-section-md">
      <h3>Left aligned</h3>
      <div class="o-grid o-grid--gutter-md u-text-left">
        <div class="o-grid__item u-1/4">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/4">
          <div class="c-demo-card">
            2
          </div>
        </div>
      </div>
    </div>

    <div class="o-section-md">
      <h3 id="grid-horizontally-aligned">Center aligned</h3>
      <div class="o-grid o-grid--gutter-md u-text-center">
        <div class="o-grid__item u-1/4">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/4">
          <div class="c-demo-card">
            2
          </div>
        </div>
      </div>
    </div>

    <div class="o-section-md">
      <h3>Right aligned</h3>
      <div class="o-grid o-grid--gutter-md u-text-right">
        <div class="o-grid__item u-1/4">
          <div class="c-demo-card">
            1
          </div>
        </div>
        <div class="o-grid__item u-1/4">
          <div class="c-demo-card">
            2
          </div>
        </div>
      </div>
    </div>

    <div class="o-section-md">
      <h3>Push / Pull</h3>
      <div class="o-grid o-grid--gutter-md">
        <div class="o-grid__item u-1/4 u-pull-1/12">
          <div class="c-demo-card">
            pull-1/12
          </div>
        </div>
        <div class="o-grid__item u-1/4 u-push-1/5">
          <div class="c-demo-card">
            push 1/5
          </div>
        </div>
      </div>
    </div>

    <div class="o-section-md">
      <h3>Nested grid with equal heights, horizontal reversal</h3>
      <div class="o-grid o-grid--gutter-md o-grid--equal-height o-grid--matrix">
        <div class="o-grid__item u-3/4@xs">
          <div class="o-grid o-grid--gutter-md o-grid--matrix">
            <div class="o-grid__item u-1/2@xs">
              <div class="c-demo-card">
                1
              </div>
            </div>
            <div class="o-grid__item u-1/2@xs">
              <div class="c-demo-card">
                2
              </div>
            </div>
            <div class="o-grid__item u-1/1@xs">
              <div class="o-grid o-grid--gutter-md o-grid--equal-height o-grid--matrix o-grid--reverse">
                <div class="o-grid__item u-1/3@xs">
                  <div class="c-demo-card">
                    3
                  </div>
                </div>
                <div class="o-grid__item u-2/3@xs">
                  <div class="c-demo-card">
                    4<br>Hello Nebula!<br>I'm<br>Reversed with 3
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="o-grid__item u-1/4@xs">
          <div class="c-demo-card">
            5
          </div>
        </div>
        <div class="o-grid__item">
          <div class="c-demo-card">
            6
          </div>
        </div>
      </div>
    </div>

  </div>

  <section class="o-section-md" id="section">
    <h2>Section</h2>
    <p>Gives top and bottom padding to pad sections of content</p>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-section-md">
        Sectioned content
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-section-sm">
        Sectioned content (small)
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-section-md@lg">
        Sectioned content at breakpoint
      </div>
    </div>
    <div class="c-demo-card">
      <div class="o-section-sm o-section-md@lg">
        Sectioned content at breakpoint
      </div>
    </div>
  </section>

  <section class="o-section-md" id="flag">
    <h2>Flag</h2>
    <p>Throws image-like and text content side by side vertically aligning the two items. The dimensions of flag component are dictated by the space occupied by it's descendants. The flag body will take up all the remaining space within the flag's parent container.</p>
    <p>The flag is useful in that you can mix fix width components along with fluid components and it also provides vertical alignment of the content.</p>
    <p>Image-like content could consist of:</p>
    <ul>
      <li>An image</li>
      <li>A button</li>
      <li>A video</li>
      <li>Anything that takes up a fixed amount of space</li>
    </ul>

    <h3>Component left</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-flag o-flag--gutter-md">
        <div class="o-flag__component">
          <img src="assets/nebula.jpg" class="demo-img" alt="">
        </div>
        <div class="o-flag__body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
        </div>
      </div>
    </div>

    <h3>Component right</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-flag o-flag--gutter-md o-flag--reverse">
        <div class="o-flag__body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
        </div>
        <div class="o-flag__component">
          <img src="assets/nebula.jpg" class="demo-img" alt="">
        </div>
      </div>
    </div>

    <h3>With breakpoint</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-flag@md o-flag--gutter-md">
        <div class="o-flag__component">
          <img src="assets/nebula.jpg" class="demo-img" alt="">
        </div>
        <div class="o-flag__body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
        </div>
      </div>
    </div>

    <h3>Text component</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-flag o-flag--gutter-md">
        <div class="o-flag__component o-flag__component--nowrap">
          <h2 class="u-flush-bottom">Nebula CSS</h2>
        </div>
        <div class="o-flag__body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
        </div>
      </div>
    </div>

    <h3>Top aligned</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-flag o-flag--gutter-md o-flag--top">
        <div class="o-flag__component">
          <img src="assets/nebula.jpg" class="demo-img" alt="">
        </div>
        <div class="o-flag__body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
        </div>
      </div>
    </div>

    <h3>Bottom aligned</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-flag o-flag--gutter-md o-flag--reverse o-flag--bottom">
        <div class="o-flag__body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
        </div>
        <div class="o-flag__component">
          <img src="assets/nebula.jpg" class="demo-img" alt="">
        </div>
      </div>
    </div>

    <h3>Nested</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="o-flag o-flag--gutter-md o-flag--reverse">
        <div class="o-flag__body">
          <div class="o-flag o-flag--gutter-md">
            <div class="o-flag__component">
              <img src="assets/nebula.jpg" class="demo-img" alt="">
            </div>
            <div class="o-flag__body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
            </div>
          </div>
        </div>
        <div class="o-flag__component">
          <img src="assets/nebula.jpg" class="demo-img" alt="">
        </div>
      </div>
    </div>

    <h3>The flag can even contain a nested grid (or vice versa ) - 🎉Infinite Composition!🎉</h3>
      <div class="o-flag o-flag--top">
        <div class="o-flag__body u-soft-right-md">
          Flag Body
          <div class="o-grid o-grid--matrix o-grid--gutter-md">
            <div class="o-grid__item u-3/4">
              <div class="c-demo-card">
                1
              </div>
            </div>
            <div class="o-grid__item u-1/4">
              <div class="c-demo-card">
                2
              </div>
            </div>
          </div>
        </div>
        <div class="o-flag__component">
          Flag Component
          <div class="c-demo-card" style="width: 200px">
            3
          </div>
        </div>
      </div>
  </section>

  <section class="o-section-md" id="lists">
    <h2>Lists</h2>
    <h3>Bare list</h3>
    <p>Removes all browser default list styling</p>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-bare-list">
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
      </ul>
    </div>

    <h3 id="bare-list-spaced">Bare list spaced</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-bare-list o-bare-list--spaced-md">
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
      </ul>
    </div>

    <h3 id="bare-list-spaced-breakpoint">Bare list spaced at breakpoint</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-bare-list o-bare-list--spaced-md@md">
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
        <li class="o-bare-list__item">bare list item</li>
      </ul>
    </div>

    <h3 id="inline-list">Inline list</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-inline-list">
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
      </ul>
    </div>

    <h3 id="inline-list-spaced">Inline list spaced</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-inline-list o-inline-list--spaced-md">
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
      </ul>
    </div>

    <h3 id="inline-list-spaced-breakpoint">Inline list spaced at breakpoint</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-inline-list o-inline-list--spaced-md@lg">
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
        <li class="o-inline-list__item">inline list item</li>
      </ul>
    </div>

    <h3 id="matrix-list">Matrix list</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-matrix-list o-matrix-list-md">
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
      </ul>
    </div>

    <h3>Matrix list at breakpoint</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-matrix-list o-matrix-list-md@lg">
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
        <li class="o-matrix-list__item">matrix list item</li>
      </ul>
    </div>

    <h3 id="uniformed-list">Uniformed list</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-uniformed-list">
        <li class="o-uniformed-list__item">uniformed list item</li>
        <li class="o-uniformed-list__item">uniformed list item</li>
        <li class="o-uniformed-list__item">uniformed list item</li>
      </ul>
    </div>

    <h3>Uniformed list at breakpoint</h3>
    <div class="c-demo-card u-push-bottom-md">
      <ul class="o-bare-list o-uniformed-list@lg">
        <li class="o-uniformed-list__item">uniformed list item</li>
        <li class="o-uniformed-list__item">uniformed list item</li>
        <li class="o-uniformed-list__item">uniformed list item</li>
      </ul>
    </div>

  </section>

  <section class="o-section-md" id="utilities">
    <h2>Utilities</h2>
    <h3 id="push">Push / Flush - Margins</h3>
    <p>Push adds margins using <code>$nb-spacing-unit</code>, use <code>flush</code> remove margin</p>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-push-bottom-md">
        push bottom
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-push-left-md">
        push left
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-push-bottom-md@lg">
        push bottom at breakpoint
      </div>
    </div>

    <h3 id="soft">Soft / Hard - Padding</h3>
    <p>Soft adds padding using <code>$nb-spacing-unit</code>, use <code>hard</code> to remove padding</p>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-soft-md">
        soft
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-soft-top-md">
        soft top
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-soft-right-md">
        soft right
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-soft-bottom-md">
        soft bottom
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-soft-left-md">
        soft left
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="c-demo-card-alt u-soft-md@lg">
        soft at breakpoint
      </div>
    </div>

    <h3 id="text-align">Text align</h3>
    <div class="c-demo-card u-push-bottom-md">
      <div class="u-text-center">
        Text center
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="u-text-right">
        Text right
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      <div class="u-text-left">
        Text left
      </div>
    </div>

    <h3 id="hidden">Hidden</h3>
    <p>Note this uses <code>display: none;</code> use <code>u-visually-hidden</code> if you want the content to be accessible to screen readers.</p>
    <div class="c-demo-card u-push-bottom-md">
      hidden:
      <div class="u-hidden">
        My hidden item
      </div>
    </div>
    <div class="c-demo-card u-push-bottom-md">
      hidden at breakpoint
      <div class="u-hidden@lg">
        My hidden item at breakpoint
      </div>
    </div>
  </section>
</body>
</html>