A forbes leaderboard built with modern frontend techniques for responsive and reusable UI.
Lists
58 snippetsBrowse Lists examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-lists
Snippets(58)
- Forbes Leaderboard
- Gradient Ordered List
A gradient ordered list built with modern frontend techniques for responsive and reusable UI.
- Pretty Sticky
A pretty sticky built with modern frontend techniques for responsive and reusable UI.
- Simple CSS Check List
A simple css check list built with modern frontend techniques for responsive and reusable UI.
- Checklist Animation - Only CSS
A checklist animation - only css built with modern frontend techniques for responsive and reusable UI.
- A Better OL (Numbered List with Circle Outline)
A a better ol (numbered list with circle outline) built with modern frontend techniques for responsive and reusable UI.
Technologies
css, htmlDifficulty
beginnerResponsive
Yes - AutoSort ToDo List (CSS Only)
A autosort todo list (css only) built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
IntermediateFeatures
CSS-only logic, Automatic sorting, Flexbox layoutResponsive
Yes - CSS Gradient Counter List
A css gradient counter list built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
intermediateFeatures
CSS Counters, Linear GradientsResponsive
Yes - CSS Ordered List with Leading Zero
A css ordered list with leading zero built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
beginnerResponsive
Yes - CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs
A css pseudo commas: exploring comma rules in nouns and verbs built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - CSS-Only Numbered Lists with Drop Shapes
A css-only numbered lists with drop shapes built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
intermediateFeatures
Custom List Markers, CSS ShapesResponsive
Yes - CSS3 List. Spinning Heart List-Style
A css3 list. spinning heart list-style built with modern frontend techniques for responsive and reusable UI.
Technologies
css3Difficulty
beginnerResponsive
Yes - Cards - ListView
A cards - listview built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Checkboxes Progress Bar with Pure CSS
A checkboxes progress bar with pure css built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
BeginnerFeatures
Zero-JS, Dynamic Progress TrackingResponsive
Yes - Codepen Team Member List - Even/Odd Styles
A codepen team member list - even/odd styles built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
zebra-striping, alternating-colorsResponsive
Yes - Custom Properties Step Progress Indicator
A custom properties step progress indicator built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
customizable-colors, step-trackingResponsive
Yes - File Manger Selectable List
A file manger selectable list built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
selectable-items, file-explorer-uiResponsive
Yes - Full Circle Note Taking
A full circle note taking built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateResponsive
Yes - Handwritten Shopping List with Custom markers
A handwritten shopping list with custom markers built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Inline Lists with Conditional Separators
A inline lists with conditional separators built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
beginnerResponsive
Yes - Interactive Loose-Leaf Todo List
A interactive loose-leaf todo list built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
contenteditable, css-gradients, paper-simulationResponsive
Yes - Just Another Definition List, Grid, Sass, Responsive
A just another definition list, grid, sass, responsive built with modern frontend techniques for responsive and reusable UI.
Technologies
Sass, CSS GridResponsive
Yes - Layout Switcher with :has()
A layout switcher with :has() built with modern frontend techniques for responsive and reusable UI.
Technologies
CSSDifficulty
intermediateBrowser support
Requires browsers that support the :has() selector.Features
Pure CSS, No JS, Dynamic LayoutResponsive
Yes - List UI
A list ui built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Literally Linked Lists
A literally linked lists built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
data visualization, relationship mapping - Mini Insta-Friends Scrolling List Layout
A mini insta-friends scrolling list layout built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
scrollable-list, social-uiResponsive
Yes - Morphing Moonrocks
A morphing moonrocks built with modern frontend techniques for responsive and reusable UI.
Technologies
SCSS, CSS AnimationsDifficulty
IntermediateFeatures
Staggered animation, Scaling effects, Custom list markers - Named Scroll-Timeline Vertical
A named scroll-timeline vertical built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Scroll-TimelineDifficulty
IntermediateFeatures
Scroll-driven animations, Performance optimized - Nested List Style
A nested list style built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
custom icons, hover effects, nested hierarchyResponsive
Yes - Nice List Styles
A nice list styles built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - OL Cards - Single Element
A ol cards - single element built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - OL Circle Cards
A ol circle cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
beginnerResponsive
Yes - OL Standing Cards
A ol standing cards built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Ordered List Arrow Cards
A ordered list arrow cards built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
directional arrows, sequential layoutResponsive
Yes - Pure CSS ASCII File Tree
A pure css ascii file tree built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
BeginnerBrowser support
Chrome 4+, Edge 12+, Firefox 3.5+, Safari 3.1+Features
No Images, ASCII Art, Automatic Nesting, Pseudo-ElementsResponsive
Yes - Pure CSS To-Do
A pure css to-do built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
beginnerResponsive
Yes - Reversed and Split List
A reversed and split list built with modern frontend techniques for responsive and reusable UI.
Difficulty
BeginnerResponsive
Yes - Reversed and Split List with ::before
A reversed and split list with ::before built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateResponsive
Yes - Stars List
A stars list built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Sticky Definition List
A sticky definition list built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
sticky positioning, semantic markupResponsive
Yes - Take a Number Contact List
A take a number contact list built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - The Magic of Cascading CSS Counters
A the magic of cascading css counters built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Counters, JavaScriptDifficulty
IntermediateFeatures
Dynamic numbering, Nested counters, Interactive controls - The Order of Operations
A the order of operations built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
CSS Counters, Sticky Header, Pseudo-element DecorationsResponsive
Yes - To-Do List
A to-do list built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
beginnerResponsive
Yes - To-Do List
A to-do list built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Todo List with Little Details
A todo list with little details built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Todo List with Sticky Notes
A todo list with sticky notes built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateFeatures
3D hover effect, Interactive toggles, CSS variables - UL Banner Cards
A ul banner cards built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - UL Cards with Depth
A ul cards with depth built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - UL Icon Cards
A ul icon cards built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - UL-Circles with Icons
A ul-circles with icons built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - Compact Book Quotes
A compact book quotes built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerResponsive
Yes - 12 nth Selectors
A 12 nth selectors built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
beginnerFeatures
:nth-child() selectors - CSS Staircase Hover Effect Using :has()
A css staircase hover effect using :has() built with modern frontend techniques for responsive and reusable UI.
Technologies
CSSDifficulty
intermediateFeatures
CSS :has() selector, Cascading animation, No-JS interaction - 3D Stacking Card List Effect
A 3d stacking card list effect built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 84+, Edge 84+, Firefox 63+, Safari 14.1+Features
3D Stacking, Focal Blur, Staggered Hover, Perspective UIResponsive
Yes - Interactive Morphing Task List Item
A interactive morphing task list item built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
AdvancedBrowser support
Modern BrowsersFeatures
SVG Morphing, Audio Feedback, Micro-interactionsResponsive
Yes - Interactive Vertical Parallax Cursor Navigation
A interactive vertical parallax cursor navigation built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Cursor Image Tracking, Vertical Panning, WAAPI Animation, Fluid TypographyResponsive
Yes - Scroll-Driven Sticky Text Reveal
A scroll-driven sticky text reveal built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 115+, Edge 115+, Safari 26+Features
Scroll-Driven Animation, Fluid Typography, Theme Switching, Sticky HighlightsResponsive
Yes


































