SIA Web Design Library

Grids

No notes defined.

<section class='c-banner'>
    <div class='c-banner__content-wrapper'>

        <header class='c-section-header'>

            <p class='c-section-header__supra'><span>Base / Layout</span></p>

            <h1 class='c-heading'>
                Grids
            </h1>

        </header>

    </div>
</section>
<section class='l-section'>
    <h2 class='c-heading c-heading--minor'>Wide (default)</h2>
    <ul class='l-grid u-list--unstyled'>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
    </ul>

    <h2 class='c-heading c-heading--minor'>Medium</h2>
    <ul class='l-grid u-list--unstyled l-grid--medium'>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
    </ul>

    <h2 class='c-heading c-heading--minor'>Compact</h2>
    <ul class='l-grid u-list--unstyled l-grid--compact'>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
        <li class='l-grid__item l-spacer u-background-light-gray margin--bottom--normal'></li>
    </ul>
</section>
 
{% set list_class = 'l-grid u-list--unstyled' %}
{% set item_class = 'l-grid__item l-spacer u-background-light-gray margin--bottom--normal' %}

{% include get_template( 'banner', 'unit' ) with {
    header: {
        supraheading: 'Base / Layout',
        heading: { 
            text: 'Grids'
        },
        lead: NULL,
    },
} %}

<section class='l-section'>
    <h2 class='c-heading c-heading--minor'>Wide (default)</h2>
    <ul class='{{ list_class }}'>
        {% for i in 0..2 %}<li class='{{ item_class }}'></li>{% endfor %}
    </ul>

    <h2 class='c-heading c-heading--minor'>Medium</h2>
    <ul class='{{ list_class }} l-grid--medium'>
        {% for i in 0..3 %}<li class='{{ item_class }}'></li>{% endfor %}
    </ul>

    <h2 class='c-heading c-heading--minor'>Compact</h2>
    <ul class='{{ list_class }} l-grid--compact'>
        {% for i in 0..5 %}<li class='{{ item_class }}'></li>{% endfor %}
    </ul>
</section>
 
/* No context defined. */