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

A collection of popular layouts and patterns made with CSS

Star me on GitHub · {{ github.stargazers }}★

Display

{% include "patterns/accordion.njk" %}

Accordion

{% include "patterns/arrow-buttons.njk" %}

Arrow buttons

{% include "patterns/avatar.njk" %}

Avatar

{% include "patterns/avatar-list.njk" %}

Avatar list

{% include "patterns/badge.njk" %}

Badge

{% include "patterns/card.njk" %}

Card

{% include "patterns/centering.njk" %}

Centering

{% include "patterns/close-button.njk" %}

Close button

{% include "patterns/color-swatch.njk" %}

Color swatch

{% include "patterns/concave-corners.njk" %}

Concave corners

{% include "patterns/cookie-banner.njk" %}

Cookie banner

{% include "patterns/corner-ribbon.njk" %}

Corner ribbon

{% include "patterns/curved-background.njk" %}

Curved background

{% include "patterns/diagonal-section.njk" %}

Diagonal section

{% include "patterns/docked-at-corner.njk" %}

Docked at corner

{% include "patterns/dot-leader.njk" %}

Dot leader

{% include "patterns/drop-area.njk" %}

Drop area

{% include "patterns/drop-cap.njk" %}

Drop cap

{% include "patterns/fading-long-section.njk" %}

Fading long section

{% include "patterns/feature-comparison.njk" %}

Feature comparison

{% include "patterns/feature-list.njk" %}

Feature list

{% include "patterns/fixed-at-corner.njk" %}

Fixed at corner

{% include "patterns/fixed-at-side.njk" %}

Fixed at side

{% include "patterns/full-background.njk" %}

Full background

{% include "patterns/initial-avatar.njk" %}

Initial avatar

{% include "patterns/inverted-corners.njk" %}

Inverted corners

{% include "patterns/keyboard-shortcut.njk" %}

Keyboard shortcut

{% include "patterns/layered-card.njk" %}

Layered card

{% include "patterns/lined-paper.njk" %}

Lined paper

{% include "patterns/media-object.njk" %}

Media object

{% include "patterns/overlay-play-button.njk" %}

Overlay play button

{% include "patterns/price-tag.njk" %}

Price tag

{% include "patterns/pricing-table.njk" %}

Pricing table

{% include "patterns/property-list.njk" %}

Property list

{% include "patterns/questions-and-answers.njk" %}

Questions and answers

{% include "patterns/ribbon.njk" %}

Ribbon

{% include "patterns/separator.njk" %}

Separator

{% include "patterns/stacked-cards.njk" %}

Stacked cards

{% include "patterns/stamp-border.njk" %}

Stamp border

{% include "patterns/video-background.njk" %}

Video background

{% include "patterns/voting.njk" %}

Voting

{% include "patterns/watermark.njk" %}

Watermark

{% include "follow.njk" %}