---
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">
            {% pattern "Accordion" %}{% include "patterns/accordion.njk" %}{% endpattern %}
            {% pattern "Arrow buttons" %}{% include "patterns/arrow-buttons.njk" %}{% endpattern %}
            {% pattern "Avatar" %}{% include "patterns/avatar.njk" %}{% endpattern %}
            {% pattern "Avatar list" %}{% include "patterns/avatar-list.njk" %}{% endpattern %}
            {% pattern "Badge" %}{% include "patterns/badge.njk" %}{% endpattern %}
            {% pattern "Card" %}{% include "patterns/card.njk" %}{% endpattern %}
            {% pattern "Centering" %}{% include "patterns/centering.njk" %}{% endpattern %}
            {% pattern "Close button" %}{% include "patterns/close-button.njk" %}{% endpattern %}
            {% pattern "Color swatch" %}{% include "patterns/color-swatch.njk" %}{% endpattern %}
            {% pattern "Concave corners" %}{% include "patterns/concave-corners.njk" %}{% endpattern %}
            {% pattern "Cookie banner" %}{% include "patterns/cookie-banner.njk" %}{% endpattern %}
            {% pattern "Corner ribbon" %}{% include "patterns/corner-ribbon.njk" %}{% endpattern %}
            {% pattern "Curved background" %}{% include "patterns/curved-background.njk" %}{% endpattern %}
            {% pattern "Diagonal section" %}{% include "patterns/diagonal-section.njk" %}{% endpattern %}
            {% pattern "Docked at corner" %}{% include "patterns/docked-at-corner.njk" %}{% endpattern %}
            {% pattern "Dot leader" %}{% include "patterns/dot-leader.njk" %}{% endpattern %}
            {% pattern "Drop area" %}{% include "patterns/drop-area.njk" %}{% endpattern %}
            {% pattern "Drop cap" %}{% include "patterns/drop-cap.njk" %}{% endpattern %}
            {% pattern "Fading long section" %}{% include "patterns/fading-long-section.njk" %}{% endpattern %}
            {% pattern "Feature comparison" %}{% include "patterns/feature-comparison.njk" %}{% endpattern %}
            {% pattern "Feature list" %}{% include "patterns/feature-list.njk" %}{% endpattern %}
            {% pattern "Fixed at corner" %}{% include "patterns/fixed-at-corner.njk" %}{% endpattern %}
            {% pattern "Fixed at side" %}{% include "patterns/fixed-at-side.njk" %}{% endpattern %}
            {% pattern "Folder structure" %}{% include "patterns/folder-structure.njk" %}{% endpattern %}
            {% pattern "Full background" %}{% include "patterns/full-background.njk" %}{% endpattern %}
            {% pattern "Initial avatar" %}{% include "patterns/initial-avatar.njk" %}{% endpattern %}
            {% pattern "Inverted corners" %}{% include "patterns/inverted-corners.njk" %}{% endpattern %}
            {% pattern "Keyboard shortcut" %}{% include "patterns/keyboard-shortcut.njk" %}{% endpattern %}
            {% pattern "Layered card" %}{% include "patterns/layered-card.njk" %}{% endpattern %}
            {% pattern "Lined paper" %}{% include "patterns/lined-paper.njk" %}{% endpattern %}
            {% pattern "Media object" %}{% include "patterns/media-object.njk" %}{% endpattern %}
            {% pattern "Overlay play button" %}{% include "patterns/overlay-play-button.njk" %}{% endpattern %}
            {% pattern "Price tag" %}{% include "patterns/price-tag.njk" %}{% endpattern %}
            {% pattern "Pricing table" %}{% include "patterns/pricing-table.njk" %}{% endpattern %}
            {% pattern "Property list" %}{% include "patterns/property-list.njk" %}{% endpattern %}
            {% pattern "Questions and answers" %}{% include "patterns/questions-and-answers.njk" %}{% endpattern %}
            {% pattern "Ribbon" %}{% include "patterns/ribbon.njk" %}{% endpattern %}
            {% pattern "Separator" %}{% include "patterns/separator.njk" %}{% endpattern %}
            {% pattern "Stacked cards" %}{% include "patterns/stacked-cards.njk" %}{% endpattern %}
            {% pattern "Stamp border" %}{% include "patterns/stamp-border.njk" %}{% endpattern %}
            {% pattern "Statistic" %}{% include "patterns/statistic.njk" %}{% endpattern %}
            {% pattern "Status light" %}{% include "patterns/status-light.njk" %}{% endpattern %}
            {% pattern "Sticky table column" %}{% include "patterns/sticky-table-column.njk" %}{% endpattern %}
            {% pattern "Sticky table headers" %}{% include "patterns/sticky-table-headers.njk" %}{% endpattern %}
            {% pattern "Teardrop" %}{% include "patterns/teardrop.njk" %}{% endpattern %}
            {% pattern "Three dimensions card" %}{% include "patterns/three-dimensions-card.njk" %}{% endpattern %}
            {% pattern "Timeline" %}{% include "patterns/timeline.njk" %}{% endpattern %}
            {% pattern "Tree diagram" %}{% include "patterns/tree-diagram.njk" %}{% endpattern %}
            {% pattern "Triangle buttons" %}{% include "patterns/triangle-buttons.njk" %}{% endpattern %}
            {% pattern "Video background" %}{% include "patterns/video-background.njk" %}{% endpattern %}
            {% pattern "Voting" %}{% include "patterns/voting.njk" %}{% endpattern %}
            {% pattern "Watermark" %}{% include "patterns/watermark.njk" %}{% endpattern %}
            {% pattern "Zigzag timeline" %}{% include "patterns/zigzag-timeline.njk" %}{% endpattern %}
        </div>
    </div>

    <div class="category">
        <h2 class="category__name">Feedback</h2>
        <div class="category__posts">
            {% pattern "Modal" %}{% include "patterns/modal.njk" %}{% endpattern %}
            {% pattern "Notification" %}{% include "patterns/notification.njk" %}{% endpattern %}
            {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
            {% pattern "Presence indicator" %}{% include "patterns/presence-indicator.njk" %}{% endpattern %}
            {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
            {% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %}
            {% pattern "Resizable element" %}{% include "patterns/resizable-element.njk" %}{% endpattern %}
            {% pattern "Tooltip" %}{% include "patterns/tooltip.njk" %}{% endpattern %}
            {% pattern "Validation icon" %}{% include "patterns/validation-icon.njk" %}{% endpattern %}
        </div>
    </div>

    <div class="category">
        <h2 class="category__name">Input</h2>
        <div class="category__posts">
            {% pattern "Button with icon" %}{% include "patterns/button-with-icon.njk" %}{% endpattern %}
            {% pattern "Chip" %}{% include "patterns/chip.njk" %}{% endpattern %}
            {% pattern "Custom checkbox button" %}{% include "patterns/custom-checkbox-button.njk" %}{% endpattern %}
            {% pattern "Custom radio button" %}{% include "patterns/custom-radio-button.njk" %}{% endpattern %}
            {% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %}
            {% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %}
            {% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %}
            {% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %}
            {% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %}
            {% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
        </div>
    </div>

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