A collection of popular CSS layouts and patterns that you can use right away

As a front-end engineer, I deal with a lot of layouts and components. While there are plenty of CSS frameworks out there that provide these, I don't always want to include them all in my project.
That's why I've put together a collection of the most popular layouts and components that can be built with pure CSS.
These layouts and components are powered by modern CSS features like flexbox and grid, and can be easily customized to fit your specific needs. By combining them, you can create any possible layout you need.
The best part? This collection has zero dependencies, no frameworks, and no CSS hacks. These are real use cases that can save you time and effort in your projects.

Display

Flipping numberFlipping number
07 Sep, 2023
Frame cornersFrame corners
06 Sep, 2023
Folded cornerFolded corner
06 Sep, 2023
Speech bubbleSpeech bubble
31 Aug, 2023
CalendarCalendar
24 Sep, 2022
Inverted cornersInverted corners
09 May, 2021
Concave cornersConcave corners
09 May, 2021
Color swatchColor swatch
08 May, 2021
Zigzag timelineZigzag timeline
18 Apr, 2021
Layered cardLayered card
04 Apr, 2021
Tree diagramTree diagram
03 Apr, 2021
Price tagPrice tag
03 Apr, 2021
Folder structureFolder structure
03 Apr, 2021
VotingVoting
01 Apr, 2021
Triangle buttonsTriangle buttons
21 Jan, 2020
Arrow buttonsArrow buttons
21 Jan, 2020
WatermarkWatermark
18 Jan, 2020
Full backgroundFull background
18 Jan, 2020
Lined paperLined paper
17 Jan, 2020
Curved backgroundCurved background
17 Jan, 2020
Stamp borderStamp border
16 Jan, 2020
Status lightStatus light
12 Jan, 2020
TeardropTeardrop
30 Dec, 2019
StatisticStatistic
30 Dec, 2019
Stacked cardsStacked cards
25 Dec, 2019
Diagonal sectionDiagonal section
25 Dec, 2019
Fixed at sideFixed at side
21 Dec, 2019
Video backgroundVideo background
16 Dec, 2019
Keyboard shortcutKeyboard shortcut
16 Dec, 2019
TimelineTimeline
12 Dec, 2019
Feature comparisonFeature comparison
11 Dec, 2019
Close buttonClose button
11 Dec, 2019
Initial avatarInitial avatar
04 Dec, 2019
AvatarAvatar
04 Dec, 2019
AccordionAccordion
04 Dec, 2019
RibbonRibbon
01 Dec, 2019
Corner ribbonCorner ribbon
01 Dec, 2019
Cookie bannerCookie banner
30 Nov, 2019
Drop capDrop cap
29 Nov, 2019
Avatar listAvatar list
29 Nov, 2019
Drop areaDrop area
27 Nov, 2019
Dot leaderDot leader
27 Nov, 2019
Property listProperty list
25 Nov, 2019
Docked at cornerDocked at corner
23 Nov, 2019
SeparatorSeparator
21 Nov, 2019
Feature listFeature list
21 Nov, 2019
Pricing tablePricing table
18 Nov, 2019
Fixed at cornerFixed at corner
17 Nov, 2019
CardCard
17 Nov, 2019
Media objectMedia object
16 Nov, 2019
BadgeBadge
16 Nov, 2019
CenteringCentering
15 Nov, 2019

Feedback

Linear gaugeLinear gauge
20 Nov, 2023
Pie chartPie chart
17 Nov, 2023
SpinnerSpinner
03 Oct, 2022
TooltipTooltip
18 Dec, 2019
Validation iconValidation icon
12 Dec, 2019
Resizable elementResizable element
10 Dec, 2019
Popover arrowPopover arrow
03 Dec, 2019
Presence indicatorPresence indicator
29 Nov, 2019
Progress barProgress bar
17 Nov, 2019
NotificationNotification
17 Nov, 2019
ModalModal
17 Nov, 2019

Input

Box selectorBox selector
24 Sep, 2022
ChipChip
21 Dec, 2019
Radio button groupRadio button group
01 Dec, 2019
Upload buttonUpload button
29 Nov, 2019
Floating labelFloating label
28 Nov, 2019
RatingRating
26 Nov, 2019
Spin buttonSpin button
25 Nov, 2019
Radio switchRadio switch
24 Nov, 2019
Search boxSearch box
22 Nov, 2019
SwitchSwitch
17 Nov, 2019
SliderSlider
17 Nov, 2019
Button with iconButton with icon
17 Nov, 2019
Stepper inputStepper input
16 Nov, 2019
Input addonInput addon
16 Nov, 2019

Layout

Masonry gridMasonry grid
28 Apr, 2021
Card layoutCard layout
25 Dec, 2019
Sticky sectionsSticky sections
19 Dec, 2019
Simple gridSimple grid
22 Nov, 2019
Split screenSplit screen
17 Nov, 2019
SidebarSidebar
16 Nov, 2019
Holy grailHoly grail
16 Nov, 2019
Sticky headerSticky header
15 Nov, 2019
Sticky footerSticky footer
15 Nov, 2019

Navigation

Carousel sliderCarousel slider
14 Oct, 2023
Nested dropdownsNested dropdowns
13 Jan, 2020
Mega menuMega menu
29 Dec, 2019
DrawerDrawer
13 Dec, 2019
Full screen menuFull screen menu
30 Nov, 2019
DropdownDropdown
29 Nov, 2019
WizardWizard
22 Nov, 2019
TabTab
22 Nov, 2019
Split navigationSplit navigation
22 Nov, 2019
Dot navigationDot navigation
22 Nov, 2019
PaginationPagination
17 Nov, 2019
MenuMenu
17 Nov, 2019
BreadcrumbBreadcrumb
17 Nov, 2019

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn