Compare - Component

Code

Source (Nunjucks)

<div class="flow">
  {% for item in data.items %}
  <figure class="compare flow" data-type="{{ item.type }}">
    <p class="compare__label">
      {{ item.label }}
    </p>
    <pre class="compare__code">{{ item.code | md | safe }}</pre>
    {% if item.caption %}
      <figcaption class="compare__caption">
        <p>— {{ item.caption | md | safe }}</p>
      </figcaption>
    {% endif %}
  </figure>
  {% endfor %}
</div>

Output

<div class="flow">
  <figure class="compare flow" data-type="worse">
    <p class="compare__label">Don’t</p>
    <pre class="compare__code"><code>Bad code example</code></pre>
  </figure>
  <figure class="compare flow" data-type="better">
    <p class="compare__label">Do</p>
    <pre class="compare__code"><code>good code example</code></pre>
  </figure>
</div>

Information

To highlight a comparison as incorrect/worse, add data-type="worse" to the .compare element. To highlight as correct/better, add data-type="better" to the .compare element.

By default, the compare pattern will be highlighted consistently with "info" states.

Key links

Sass File

Variants

In columns

View full screen

Code

Source (Nunjucks)

<div class="switcher">
  {% for item in data.items %}
  <figure class="compare flow" data-type="{{ item.type }}">
    <p class="compare__label">
      {{ item.label }}
    </p>
    <pre class="compare__code">{{ item.code | md | safe }}</pre>
    {% if item.caption %}
      <figcaption class="compare__caption">
        <p>— {{ item.caption | md | safe }}</p>
      </figcaption>
    {% endif %}
  </figure>
  {% endfor %}
</div>

Output

<div class="switcher">
  <figure class="compare flow" data-type="worse">
    <p class="compare__label">Don’t</p>
    <pre class="compare__code"><code>Bad code example</code></pre>
  </figure>
  <figure class="compare flow" data-type="better">
    <p class="compare__label">Do</p>
    <pre class="compare__code"><code>good code example</code></pre>
  </figure>
</div>

With captions

View full screen

Code

Source (Nunjucks)

<div class="flow">
  {% for item in data.items %}
  <figure class="compare flow" data-type="{{ item.type }}">
    <p class="compare__label">
      {{ item.label }}
    </p>
    <pre class="compare__code">{{ item.code | md | safe }}</pre>
    {% if item.caption %}
      <figcaption class="compare__caption">
        <p>— {{ item.caption | md | safe }}</p>
      </figcaption>
    {% endif %}
  </figure>
  {% endfor %}
</div>

Output

<div class="flow">
  <figure class="compare flow" data-type="worse">
    <p class="compare__label">Don’t</p>
    <pre class="compare__code"><code>Bad code example</code></pre>
    <figcaption class="compare__caption">
      <p>— Explanation of why <code>example</code> is bad.</p>
    </figcaption>
  </figure>
  <figure class="compare flow" data-type="better">
    <p class="compare__label">Do</p>
    <pre class="compare__code"><code>good code example</code></pre>
    <figcaption class="compare__caption">
      <p>— Explanation of why <code>example</code> is good.</p>
    </figcaption>
  </figure>
</div>