csslayout/contents/index.njk

---
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="pattern__item">
                <a class="pattern__link" href="/accordion/">
                    <div class="pattern__cover">{% include "patterns/accordion.njk" %}</div>
                    <div class="pattern__title">Accordion</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/arrow-buttons/">
                    <div class="pattern__cover">{% include "patterns/arrow-buttons.njk" %}</div>
                    <div class="pattern__title">Arrow buttons</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/avatar/">
                    <div class="pattern__cover">{% include "patterns/avatar.njk" %}</div>
                    <div class="pattern__title">Avatar</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/avatar-list/">
                    <div class="pattern__cover">{% include "patterns/avatar-list.njk" %}</div>
                    <div class="pattern__title">Avatar list</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/badge/">
                    <div class="pattern__cover">{% include "patterns/badge.njk" %}</div>
                    <div class="pattern__title">Badge</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/card/">
                    <div class="pattern__cover">{% include "patterns/card.njk" %}</div>
                    <div class="pattern__title">Card</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/centering/">
                    <div class="pattern__cover">{% include "patterns/centering.njk" %}</div>
                    <div class="pattern__title">Centering</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/close-button/">
                    <div class="pattern__cover">{% include "patterns/close-button.njk" %}</div>
                    <div class="pattern__title">Close button</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/color-swatch/">
                    <div class="pattern__cover">{% include "patterns/color-swatch.njk" %}</div>
                    <div class="pattern__title">Color swatch</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/concave-corners/">
                    <div class="pattern__cover">{% include "patterns/concave-corners.njk" %}</div>
                    <div class="pattern__title">Concave corners</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/cookie-banner/">
                    <div class="pattern__cover">{% include "patterns/cookie-banner.njk" %}</div>
                    <div class="pattern__title">Cookie banner</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/corner-ribbon/">
                    <div class="pattern__cover">{% include "patterns/corner-ribbon.njk" %}</div>
                    <div class="pattern__title">Corner ribbon</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/curved-background/">
                    <div class="pattern__cover">{% include "patterns/curved-background.njk" %}</div>
                    <div class="pattern__title">Curved background</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/diagonal-section/">
                    <div class="pattern__cover">{% include "patterns/diagonal-section.njk" %}</div>
                    <div class="pattern__title">Diagonal section</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/docked-at-corner/">
                    <div class="pattern__cover">{% include "patterns/docked-at-corner.njk" %}</div>
                    <div class="pattern__title">Docked at corner</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/dot-leader/">
                    <div class="pattern__cover">{% include "patterns/dot-leader.njk" %}</div>
                    <div class="pattern__title">Dot leader</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/drop-area/">
                    <div class="pattern__cover">{% include "patterns/drop-area.njk" %}</div>
                    <div class="pattern__title">Drop area</div>
                </a>
            </div>
        </div>
    </div>

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