{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}

{# molecules #}
{% import "styleguides/general/molecules/summary/summary-macros.njk" as summary %}


{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<section class="l-section">
    <div class="l-container l-content">
        <div class="l-grid l-grid--with-margins">
            {{summary.button("l-grid__col-4-12", {
                iconFront: "icon-chart",
                iconBack: "icon-arrow-right",
                title: "Renteoverzicht"
            })}}

            {{summary.button("l-grid__col-4-12", {
                iconFront: "icon-file-add",
                iconBack: "icon-arrow-right",
                title: "Nieuwe rekeningsuittreksel"
            })}}

            {{summary.button("l-grid__col-4-12", {
                iconFront: "icon-file",
                iconBack: "icon-arrow-right",
                iconBack: "icon-arrow-right",
                title: "Aangemaakte rekeningsuittreksels"
            })}}

            {{summary.button("l-grid__col-4-12", {
                iconFront: "icon-info",
                iconBack: "icon-arrow-right",
                title: "Wettelijke informatie"
            })}}

            {{summary.button("l-grid__col-4-12", {
                iconFront: "icon-speech",
                iconBack: "icon-external",
                title: "Contact"
            })}}

            {{summary.button("l-grid__col-4-12", {
                iconFront: "icon-help",
                iconBack: "icon-external",
                title: "FAQ"
            })}}
        </div>
    </div>
</section>