site/_src/_includes/sections/section-guides.html

<section class="section section--guides">
    <div class="row">
        <header class="section-header">
            <h1 class="section-title">The Hitchhiker's Guide to BigchainDB</h1>
            <p class="section-description">Complete the guide to learn about how to create apps in BigchainDB.</p>
        </header>
    </div>

    <div class="row row--wide">
        <div class="grid grid--full grid-small--half grid--gutters--small">
            {% assign guides = site.guides | sort: 'order' %}
            {% for guide in guides limit: 4 %}
                <div class="grid__col">
                    <article class="guide">
                        <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/developers/guides/{{ guide.header }}')" {% endif %}>
                            <h1 class="guide__title">{{ guide.title }}</h1>
                            <p class="guide__tagline">{{ guide.tagline }}</p>
                        </a>
                    </article>
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="row text-center">
        <a class="btn btn-secondary" href="{% link developers/guides.html %}">All chapters</a>
    </div>
</section>