<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: xs</h2>
        <p class="font-nunito text-xs-tight">
            Nunito Sans, size <b>xs</b>, tight lineheight. </p>
        <p class="font-rubik text-xs-tight">
            Rubik, size <b>xs</b>, tight lineheight. </p>
        <p class="font-nunito text-xs-medium">
            Nunito Sans, size <b>xs</b>, medium lineheight. </p>
        <p class="font-rubik text-xs-medium">
            Rubik, size <b>xs</b>, medium lineheight. </p>
        <p class="font-nunito text-xs-wide">
            Nunito Sans, size <b>xs</b>, wide lineheight. </p>
        <p class="font-rubik text-xs-wide">
            Rubik, size <b>xs</b>, wide lineheight. </p>
        <p class="font-nunito text-xs-huge">
            Nunito Sans, size <b>xs</b>, huge lineheight. </p>
        <p class="font-rubik text-xs-huge">
            Rubik, size <b>xs</b>, huge lineheight. </p>
        <p class="font-nunito text-xs-redic">
            Nunito Sans, size <b>xs</b>, redic lineheight. </p>
        <p class="font-rubik text-xs-redic">
            Rubik, size <b>xs</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: s</h2>
        <p class="font-nunito text-s-tight">
            Nunito Sans, size <b>s</b>, tight lineheight. </p>
        <p class="font-rubik text-s-tight">
            Rubik, size <b>s</b>, tight lineheight. </p>
        <p class="font-nunito text-s-medium">
            Nunito Sans, size <b>s</b>, medium lineheight. </p>
        <p class="font-rubik text-s-medium">
            Rubik, size <b>s</b>, medium lineheight. </p>
        <p class="font-nunito text-s-wide">
            Nunito Sans, size <b>s</b>, wide lineheight. </p>
        <p class="font-rubik text-s-wide">
            Rubik, size <b>s</b>, wide lineheight. </p>
        <p class="font-nunito text-s-huge">
            Nunito Sans, size <b>s</b>, huge lineheight. </p>
        <p class="font-rubik text-s-huge">
            Rubik, size <b>s</b>, huge lineheight. </p>
        <p class="font-nunito text-s-redic">
            Nunito Sans, size <b>s</b>, redic lineheight. </p>
        <p class="font-rubik text-s-redic">
            Rubik, size <b>s</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: m</h2>
        <p class="font-nunito text-m-tight">
            Nunito Sans, size <b>m</b>, tight lineheight. </p>
        <p class="font-rubik text-m-tight">
            Rubik, size <b>m</b>, tight lineheight. </p>
        <p class="font-nunito text-m-medium">
            Nunito Sans, size <b>m</b>, medium lineheight. </p>
        <p class="font-rubik text-m-medium">
            Rubik, size <b>m</b>, medium lineheight. </p>
        <p class="font-nunito text-m-wide">
            Nunito Sans, size <b>m</b>, wide lineheight. </p>
        <p class="font-rubik text-m-wide">
            Rubik, size <b>m</b>, wide lineheight. </p>
        <p class="font-nunito text-m-huge">
            Nunito Sans, size <b>m</b>, huge lineheight. </p>
        <p class="font-rubik text-m-huge">
            Rubik, size <b>m</b>, huge lineheight. </p>
        <p class="font-nunito text-m-redic">
            Nunito Sans, size <b>m</b>, redic lineheight. </p>
        <p class="font-rubik text-m-redic">
            Rubik, size <b>m</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: l</h2>
        <p class="font-nunito text-l-tight">
            Nunito Sans, size <b>l</b>, tight lineheight. </p>
        <p class="font-rubik text-l-tight">
            Rubik, size <b>l</b>, tight lineheight. </p>
        <p class="font-nunito text-l-medium">
            Nunito Sans, size <b>l</b>, medium lineheight. </p>
        <p class="font-rubik text-l-medium">
            Rubik, size <b>l</b>, medium lineheight. </p>
        <p class="font-nunito text-l-wide">
            Nunito Sans, size <b>l</b>, wide lineheight. </p>
        <p class="font-rubik text-l-wide">
            Rubik, size <b>l</b>, wide lineheight. </p>
        <p class="font-nunito text-l-huge">
            Nunito Sans, size <b>l</b>, huge lineheight. </p>
        <p class="font-rubik text-l-huge">
            Rubik, size <b>l</b>, huge lineheight. </p>
        <p class="font-nunito text-l-redic">
            Nunito Sans, size <b>l</b>, redic lineheight. </p>
        <p class="font-rubik text-l-redic">
            Rubik, size <b>l</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: xl</h2>
        <p class="font-nunito text-xl-tight">
            Nunito Sans, size <b>xl</b>, tight lineheight. </p>
        <p class="font-rubik text-xl-tight">
            Rubik, size <b>xl</b>, tight lineheight. </p>
        <p class="font-nunito text-xl-medium">
            Nunito Sans, size <b>xl</b>, medium lineheight. </p>
        <p class="font-rubik text-xl-medium">
            Rubik, size <b>xl</b>, medium lineheight. </p>
        <p class="font-nunito text-xl-wide">
            Nunito Sans, size <b>xl</b>, wide lineheight. </p>
        <p class="font-rubik text-xl-wide">
            Rubik, size <b>xl</b>, wide lineheight. </p>
        <p class="font-nunito text-xl-huge">
            Nunito Sans, size <b>xl</b>, huge lineheight. </p>
        <p class="font-rubik text-xl-huge">
            Rubik, size <b>xl</b>, huge lineheight. </p>
        <p class="font-nunito text-xl-redic">
            Nunito Sans, size <b>xl</b>, redic lineheight. </p>
        <p class="font-rubik text-xl-redic">
            Rubik, size <b>xl</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: 2xl</h2>
        <p class="font-nunito text-2xl-tight">
            Nunito Sans, size <b>2xl</b>, tight lineheight. </p>
        <p class="font-rubik text-2xl-tight">
            Rubik, size <b>2xl</b>, tight lineheight. </p>
        <p class="font-nunito text-2xl-medium">
            Nunito Sans, size <b>2xl</b>, medium lineheight. </p>
        <p class="font-rubik text-2xl-medium">
            Rubik, size <b>2xl</b>, medium lineheight. </p>
        <p class="font-nunito text-2xl-wide">
            Nunito Sans, size <b>2xl</b>, wide lineheight. </p>
        <p class="font-rubik text-2xl-wide">
            Rubik, size <b>2xl</b>, wide lineheight. </p>
        <p class="font-nunito text-2xl-huge">
            Nunito Sans, size <b>2xl</b>, huge lineheight. </p>
        <p class="font-rubik text-2xl-huge">
            Rubik, size <b>2xl</b>, huge lineheight. </p>
        <p class="font-nunito text-2xl-redic">
            Nunito Sans, size <b>2xl</b>, redic lineheight. </p>
        <p class="font-rubik text-2xl-redic">
            Rubik, size <b>2xl</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: 3xl</h2>
        <p class="font-nunito text-3xl-tight">
            Nunito Sans, size <b>3xl</b>, tight lineheight. </p>
        <p class="font-rubik text-3xl-tight">
            Rubik, size <b>3xl</b>, tight lineheight. </p>
        <p class="font-nunito text-3xl-medium">
            Nunito Sans, size <b>3xl</b>, medium lineheight. </p>
        <p class="font-rubik text-3xl-medium">
            Rubik, size <b>3xl</b>, medium lineheight. </p>
        <p class="font-nunito text-3xl-wide">
            Nunito Sans, size <b>3xl</b>, wide lineheight. </p>
        <p class="font-rubik text-3xl-wide">
            Rubik, size <b>3xl</b>, wide lineheight. </p>
        <p class="font-nunito text-3xl-huge">
            Nunito Sans, size <b>3xl</b>, huge lineheight. </p>
        <p class="font-rubik text-3xl-huge">
            Rubik, size <b>3xl</b>, huge lineheight. </p>
        <p class="font-nunito text-3xl-redic">
            Nunito Sans, size <b>3xl</b>, redic lineheight. </p>
        <p class="font-rubik text-3xl-redic">
            Rubik, size <b>3xl</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: 4xl</h2>
        <p class="font-nunito text-4xl-tight">
            Nunito Sans, size <b>4xl</b>, tight lineheight. </p>
        <p class="font-rubik text-4xl-tight">
            Rubik, size <b>4xl</b>, tight lineheight. </p>
        <p class="font-nunito text-4xl-medium">
            Nunito Sans, size <b>4xl</b>, medium lineheight. </p>
        <p class="font-rubik text-4xl-medium">
            Rubik, size <b>4xl</b>, medium lineheight. </p>
        <p class="font-nunito text-4xl-wide">
            Nunito Sans, size <b>4xl</b>, wide lineheight. </p>
        <p class="font-rubik text-4xl-wide">
            Rubik, size <b>4xl</b>, wide lineheight. </p>
        <p class="font-nunito text-4xl-huge">
            Nunito Sans, size <b>4xl</b>, huge lineheight. </p>
        <p class="font-rubik text-4xl-huge">
            Rubik, size <b>4xl</b>, huge lineheight. </p>
        <p class="font-nunito text-4xl-redic">
            Nunito Sans, size <b>4xl</b>, redic lineheight. </p>
        <p class="font-rubik text-4xl-redic">
            Rubik, size <b>4xl</b>, redic lineheight. </p>
    </div>
</div>
<div class="slab ">
    <div class="slab__wrapper">
        <h2>Font size: 5xl</h2>
        <p class="font-nunito text-5xl-tight">
            Nunito Sans, size <b>5xl</b>, tight lineheight. </p>
        <p class="font-rubik text-5xl-tight">
            Rubik, size <b>5xl</b>, tight lineheight. </p>
        <p class="font-nunito text-5xl-medium">
            Nunito Sans, size <b>5xl</b>, medium lineheight. </p>
        <p class="font-rubik text-5xl-medium">
            Rubik, size <b>5xl</b>, medium lineheight. </p>
        <p class="font-nunito text-5xl-wide">
            Nunito Sans, size <b>5xl</b>, wide lineheight. </p>
        <p class="font-rubik text-5xl-wide">
            Rubik, size <b>5xl</b>, wide lineheight. </p>
        <p class="font-nunito text-5xl-huge">
            Nunito Sans, size <b>5xl</b>, huge lineheight. </p>
        <p class="font-rubik text-5xl-huge">
            Rubik, size <b>5xl</b>, huge lineheight. </p>
        <p class="font-nunito text-5xl-redic">
            Nunito Sans, size <b>5xl</b>, redic lineheight. </p>
        <p class="font-rubik text-5xl-redic">
            Rubik, size <b>5xl</b>, redic lineheight. </p>
    </div>
</div>
{% set sizes = ['xs','s','m','l','xl','2xl','3xl','4xl','5xl'] %}
{% for size in sizes %}
    {% embed '@slab' with { slab_variant : "slab--davidson-white" } %}
        {% block slab_content %}
            <h2>Font size: {{ size }}</h2>
            {% for spacing in ['tight','medium','wide','huge','redic'] %}
                <p class="font-nunito text-{{ size }}{% if spacing is not empty %}-{{ spacing }}{% endif %}">
                    {% spaceless %}
                    Nunito Sans, size <b>{{ size }}</b>, {{ spacing }} lineheight. {{ sentences }}
                    {% endspaceless %}
                </p>
                <p class="font-rubik text-{{ size }}{% if spacing is not empty %}-{{ spacing }}{% endif %}">
                    {% spaceless %}
                    Rubik, size <b>{{ size }}</b>, {{ spacing }} lineheight. {{ sentences }}
                    {% endspaceless %}
                </p>
            {% endfor %}
        {% endblock %}
    {% endembed %}
{% endfor %}
/* No context defined for this component. */

There are no notes for this item.