CSS Layout

Popular layouts and patterns made with CSS

Following covers are made with CSS only. Inspect them!

Display

Accordion

Arrow buttons

Avatar

Avatar list

Badge

Card

Centering

Close button

Color swatch

Concave corners

Cookie banner

Corner ribbon

Curved background

Diagonal section

Docked at corner

Dot leader

Drop area

Drop cap

Fading long section

Feature comparison

Feature list

Fixed at corner

Fixed at side

Folder structure

Full background

Initial avatar

Inverted corners

Keyboard shortcut

Layered card

Lined paper

Media object

Overlay play button

Price tag

Pricing table

Property list

Questions and answers

Ribbon

Separator

Stacked cards

Stamp border

Statistic

Status light

Sticky table column

Sticky table headers

Teardrop

Three dimensions card

Timeline

Tree diagram

Triangle buttons

Video background

Voting

Watermark

Zigzag timeline

Feedback

Modal

Notification

Popover arrow

Progress bar

Radial progress bar

Resizable element

Presence indicator

Tooltip

Validation icon

Input

Button with icon

Chip

Custom checkbox button

Custom radio button

Floating label

Input addon

Radio button group

Radio switch

Rating

Search box

Slider

Spin button

Stepper input

Switch

Toggle password visibility

Upload button

Layout

Card layout

Holy grail

Masonry grid

Same height columns

Sidebar

Simple grid

Split screen

Sticky footer

Sticky header

Sticky sections

Navigation

Breadcrumb

Circular navigation

Dot navigation

Drawer

Dropdown

Full screen menu

Mega menu

Menu

Nested dropdowns

Pagination

Previous next buttons

Split navigation

Tab

Wizard