---
layout: layouts/base.njk
title: A collection of popular layouts and patterns made with CSS
eleventyExcludeFromCollections: true
---

<div class="container">
    <div class="hero">
        <h1 class="hero__heading">A collection of popular layouts and patterns made with CSS</h1>
        <a class="hero__button" href="https://github.com/phuocng/csslayout">Star me on GitHub · {{ github.stargazers }}★</a>
    </div>

    <div class="category">
        <h2 class="category__name">Display</h2>
        <div class="category__posts">            
            <div class="card__item">
                <a class="card__link" href="/accordion/">
                    <div class="card__cover">{% include "patterns/accordion.njk" %}</div>
                    <div class="card__title">Accordion</div>
                </a>
            </div>
            <div class="card__item">
                <a class="card__link" href="/arrow-buttons/">
                    <div class="card__cover">{% include "patterns/arrow-buttons.njk" %}</div>
                    <div class="card__title">Arrow buttons</div>
                </a>
            </div>
            <div class="card__item">
                <a class="card__link" href="/avatar/">
                    <div class="card__cover">{% include "patterns/avatar.njk" %}</div>
                    <div class="card__title">Avatar</div>
                </a>
            </div>
            <div class="card__item">
                <a class="card__link" href="/avatar-list/">
                    <div class="card__cover">{% include "patterns/avatar-list.njk" %}</div>
                    <div class="card__title">Avatar list</div>
                </a>
            </div>
        </div>
    </div>

    {% include "follow.njk" %}
</div>