boxes.html

{% if include.columns %}
    {% assign columns = include.columns %}
    {% if columns == '1' %}
        {% assign container = ' uk-container-xsmall' %}
    {% elsif columns == '2' %}
        {% assign container = ' uk-container-small' %}
    {% else %}
        {% assign container = '' %}
    {% endif %}
{% else %}
    {% assign columns = 3 %}
    {% assign container = '' %}
{% endif %}

<div class="uk-section">
    <div class="uk-container{{container}}">

        {% if include.title %}
            <h2 class="uk-h1 uk-text-center">{{ include.title }}</h2>
        {% endif %}

        {% if include.subtitle %}<p class="uk-text-lead uk-text-center">{{ include.subtitle | escape }}</p>{% endif %}

        <div class="uk-child-width-1-{{ columns }}@m uk-grid-match uk-text-center uk-margin-medium-top" data-uk-grid>
        {% for item in site.data.navigation_boxes %}
            {% if item.title %}
            {% assign doc_url = item.doc | prepend:"/docs/" | append:"/" %}
            {% assign doc = site.docs | where:"url", doc_url | first %}
            <div>
                <div class="uk-card uk-card-default uk-box-shadow-medium uk-card-hover uk-card-body uk-inline border-radius-large border-xlight">
                    <a class="uk-position-cover" href="{{ doc.url }}"></a>
                    {% if item.icon %}
                    <span data-uk-icon="icon: {{ item.icon }}; ratio: 3.4" class=""></span>
                    {% endif %}
                    <h3 class="uk-card-title uk-margin">{{ item.title }}</h3>
                    {% if item.desc %}
                    <p>{{ item.desc }}</p>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        {% endfor %}
        </div>

    </div>
</div>