Pattern library

Compare

View full screen

Details

Source (Nunjucks)

{% for item in data.items %}
<figure class="w-compare">
<p class="w-compare__label w-compare__label--{{ item.type }}">
{{ item.label }}
</p>
{{ item.content | md | safe }}

{% if item.caption %}
<figcaption class="w-compare__caption">
<p>{{ item.caption | md | safe }}</p>
</figcaption>
{% endif %}
</figure>
{% endfor %}

Output

<figure class="w-compare">
<p class="w-compare__label w-compare__label--worse">
Don’t
</p>
<code>Bad code example</code>


</figure>

<figure class="w-compare">
<p class="w-compare__label w-compare__label--better">
Do
</p>
<code>good code example</code>


</figure>

Variants

In columns

View full screen

Details

Source

<div class="w-columns">
{% for item in data.items %}
<figure class="w-compare">
<p class="w-compare__label w-compare__label--{{ item.type }}">
{{ item.label }}
</p>
{{ item.content | md | safe }}

{% if item.caption %}
<figcaption class="w-compare__caption">
<p>{{ item.caption | md | safe }}</p>
</figcaption>
{% endif %}
</figure>
{% endfor %}
</div>

Output
<div class="w-columns">

<figure class="w-compare">
<p class="w-compare__label w-compare__label--worse">
Don’t
</p>
<code>Bad code example</code>


</figure>

<figure class="w-compare">
<p class="w-compare__label w-compare__label--better">
Do
</p>
<code>good code example</code>


</figure>

</div>

With captions

View full screen

Details

Source

{% for item in data.items %}
<figure class="w-compare">
<p class="w-compare__label w-compare__label--{{ item.type }}">
{{ item.label }}
</p>
{{ item.content | md | safe }}

{% if item.caption %}
<figcaption class="w-compare__caption">
<p>{{ item.caption | md | safe }}</p>
</figcaption>
{% endif %}
</figure>
{% endfor %}

Output
<figure class="w-compare">
<p class="w-compare__label w-compare__label--worse">
Don’t
</p>
<code>Bad code example</code>


<figcaption class="w-compare__caption">
<p>Explanation of why <code>example</code> is bad.</p>
</figcaption>

</figure>

<figure class="w-compare">
<p class="w-compare__label w-compare__label--better">
Do
</p>
<code>good code example</code>


<figcaption class="w-compare__caption">
<p>Explanation of why <code>example</code> is good.</p>
</figcaption>

</figure>