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 class="pattern__item">
                <a class="pattern__link" href="/drop-cap/">
                    <div class="pattern__cover">{% include "patterns/drop-cap.njk" %}</div>
                    <div class="pattern__title">Drop cap</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/fading-long-section/">
                    <div class="pattern__cover">{% include "patterns/fading-long-section.njk" %}</div>
                    <div class="pattern__title">Fading long section</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/feature-comparison/">
                    <div class="pattern__cover">{% include "patterns/feature-comparison.njk" %}</div>
                    <div class="pattern__title">Feature comparison</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/feature-list/">
                    <div class="pattern__cover">{% include "patterns/feature-list.njk" %}</div>
                    <div class="pattern__title">Feature list</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/fixed-at-corner/">
                    <div class="pattern__cover">{% include "patterns/fixed-at-corner.njk" %}</div>
                    <div class="pattern__title">Fixed at corner</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/fixed-at-side/">
                    <div class="pattern__cover">{% include "patterns/fixed-at-side.njk" %}</div>
                    <div class="pattern__title">Fixed at side</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/full-background/">
                    <div class="pattern__cover">{% include "patterns/full-background.njk" %}</div>
                    <div class="pattern__title">Full background</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/initial-avatar/">
                    <div class="pattern__cover">{% include "patterns/initial-avatar.njk" %}</div>
                    <div class="pattern__title">Initial avatar</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/inverted-corners/">
                    <div class="pattern__cover">{% include "patterns/inverted-corners.njk" %}</div>
                    <div class="pattern__title">Inverted corners</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/keyboard-shortcut/">
                    <div class="pattern__cover">{% include "patterns/keyboard-shortcut.njk" %}</div>
                    <div class="pattern__title">Keyboard shortcut</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/layered-card/">
                    <div class="pattern__cover">{% include "patterns/layered-card.njk" %}</div>
                    <div class="pattern__title">Layered card</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/lined-paper/">
                    <div class="pattern__cover">{% include "patterns/lined-paper.njk" %}</div>
                    <div class="pattern__title">Lined paper</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/media-object/">
                    <div class="pattern__cover">{% include "patterns/media-object.njk" %}</div>
                    <div class="pattern__title">Media object</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/overlay-play-button/">
                    <div class="pattern__cover">{% include "patterns/overlay-play-button.njk" %}</div>
                    <div class="pattern__title">Overlay play button</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/price-tag/">
                    <div class="pattern__cover">{% include "patterns/price-tag.njk" %}</div>
                    <div class="pattern__title">Price tag</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/pricing-table/">
                    <div class="pattern__cover">{% include "patterns/pricing-table.njk" %}</div>
                    <div class="pattern__title">Pricing table</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/property-list/">
                    <div class="pattern__cover">{% include "patterns/property-list.njk" %}</div>
                    <div class="pattern__title">Property list</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/questions-and-answers/">
                    <div class="pattern__cover">{% include "patterns/questions-and-answers.njk" %}</div>
                    <div class="pattern__title">Questions and answers</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/ribbon/">
                    <div class="pattern__cover">{% include "patterns/ribbon.njk" %}</div>
                    <div class="pattern__title">Ribbon</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/separator/">
                    <div class="pattern__cover">{% include "patterns/separator.njk" %}</div>
                    <div class="pattern__title">Separator</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/stacked-cards/">
                    <div class="pattern__cover">{% include "patterns/stacked-cards.njk" %}</div>
                    <div class="pattern__title">Stacked cards</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/stamp-border/">
                    <div class="pattern__cover">{% include "patterns/stamp-border.njk" %}</div>
                    <div class="pattern__title">Stamp border</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/statistic/">
                    <div class="pattern__cover">{% include "patterns/statistic.njk" %}</div>
                    <div class="pattern__title">Statistic</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/status-light/">
                    <div class="pattern__cover">{% include "patterns/status-light.njk" %}</div>
                    <div class="pattern__title">Status light</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/teardrop/">
                    <div class="pattern__cover">{% include "patterns/teardrop.njk" %}</div>
                    <div class="pattern__title">Teardrop</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/three-dimensions-card/">
                    <div class="pattern__cover">{% include "patterns/three-dimensions-card.njk" %}</div>
                    <div class="pattern__title">Three dimensions card</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/timeline/">
                    <div class="pattern__cover">{% include "patterns/timeline.njk" %}</div>
                    <div class="pattern__title">Timeline</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/video-background/">
                    <div class="pattern__cover">{% include "patterns/video-background.njk" %}</div>
                    <div class="pattern__title">Video background</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/voting/">
                    <div class="pattern__cover">{% include "patterns/voting.njk" %}</div>
                    <div class="pattern__title">Voting</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/watermark/">
                    <div class="pattern__cover">{% include "patterns/watermark.njk" %}</div>
                    <div class="pattern__title">Watermark</div>
                </a>
            </div>
            <div class="pattern__item">
                <a class="pattern__link" href="/zigzag-timeline/">
                    <div class="pattern__cover">{% include "patterns/zigzag-timeline.njk" %}</div>
                    <div class="pattern__title">Zigzag timeline</div>
                </a>
            </div>
        </div>
    </div>

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