Lists

58 snippets

Browse Lists examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-lists

Snippets(58)

Forbes Leaderboard
A forbes leaderboard built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Gradient Ordered List
A gradient ordered list built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pretty Sticky
A pretty sticky built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Simple CSS Check List
A simple css check list built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Checklist Animation - Only CSS
A checklist animation - only css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
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.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
css, html
Difficulty
beginner
Responsive
Yes
AutoSort ToDo List (CSS Only)
A autosort todo list (css only) built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
Intermediate
Features
CSS-only logic, Automatic sorting, Flexbox layout
Responsive
Yes
CSS Gradient Counter List
A css gradient counter list built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3
Difficulty
intermediate
Features
CSS Counters, Linear Gradients
Responsive
Yes
CSS Ordered List with Leading Zero
A css ordered list with leading zero built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
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.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Responsive
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.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
CSS3
Difficulty
intermediate
Features
Custom List Markers, CSS Shapes
Responsive
Yes
CSS3 List. Spinning Heart List-Style
A css3 list. spinning heart list-style built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
css3
Difficulty
beginner
Responsive
Yes
Cards - ListView
A cards - listview built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Checkboxes Progress Bar with Pure CSS
A checkboxes progress bar with pure css built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Features
Zero-JS, Dynamic Progress Tracking
Responsive
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.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Features
zebra-striping, alternating-colors
Responsive
Yes
Custom Properties Step Progress Indicator
A custom properties step progress indicator built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Difficulty
beginner
Features
customizable-colors, step-tracking
Responsive
Yes
File Manger Selectable List
A file manger selectable list built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Difficulty
beginner
Features
selectable-items, file-explorer-ui
Responsive
Yes
Full Circle Note Taking
A full circle note taking built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
intermediate
Responsive
Yes
Handwritten Shopping List with Custom markers
A handwritten shopping list with custom markers built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Responsive
Yes
Inline Lists with Conditional Separators
A inline lists with conditional separators built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
Interactive Loose-Leaf Todo List
A interactive loose-leaf todo list built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
intermediate
Features
contenteditable, css-gradients, paper-simulation
Responsive
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.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
Sass, CSS Grid
Responsive
Yes
Layout Switcher with :has()
A layout switcher with :has() built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
intermediate
Browser support
Requires browsers that support the :has() selector.
Features
Pure CSS, No JS, Dynamic Layout
Responsive
Yes
List UI
A list ui built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Responsive
Yes
Literally Linked Lists
A literally linked lists built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
intermediate
Features
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.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Features
scrollable-list, social-ui
Responsive
Yes
Morphing Moonrocks
A morphing moonrocks built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
SCSS, CSS Animations
Difficulty
Intermediate
Features
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.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
CSS Scroll-Timeline
Difficulty
Intermediate
Features
Scroll-driven animations, Performance optimized
Nested List Style
A nested list style built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
beginner
Features
custom icons, hover effects, nested hierarchy
Responsive
Yes
Nice List Styles
A nice list styles built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
beginner
Responsive
Yes
OL Cards - Single Element
A ol cards - single element built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
OL Circle Cards
A ol circle cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
OL Standing Cards
A ol standing cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
Ordered List Arrow Cards
A ordered list arrow cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Features
directional arrows, sequential layout
Responsive
Yes
Pure CSS ASCII File Tree
A pure css ascii file tree built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Browser support
Chrome 4+, Edge 12+, Firefox 3.5+, Safari 3.1+
Features
No Images, ASCII Art, Automatic Nesting, Pseudo-Elements
Responsive
Yes
Pure CSS To-Do
A pure css to-do built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Responsive
Yes
Reversed and Split List
A reversed and split list built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
Beginner
Responsive
Yes
Reversed and Split List with ::before
A reversed and split list with ::before built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Responsive
Yes
Stars List
A stars list built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
beginner
Responsive
Yes
Sticky Definition List
A sticky definition list built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Features
sticky positioning, semantic markup
Responsive
Yes
Take a Number Contact List
A take a number contact list built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Difficulty
beginner
Responsive
Yes
The Magic of Cascading CSS Counters
A the magic of cascading css counters built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
CSS Counters, JavaScript
Difficulty
Intermediate
Features
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.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
intermediate
Features
CSS Counters, Sticky Header, Pseudo-element Decorations
Responsive
Yes
To-Do List
A to-do list built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
beginner
Responsive
Yes
To-Do List
A to-do list built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Difficulty
beginner
Responsive
Yes
Todo List with Little Details
A todo list with little details built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Responsive
Yes
Todo List with Sticky Notes
A todo list with sticky notes built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Features
3D hover effect, Interactive toggles, CSS variables
UL Banner Cards
A ul banner cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
UL Cards with Depth
A ul cards with depth built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
UL Icon Cards
A ul icon cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
beginner
Responsive
Yes
UL-Circles with Icons
A ul-circles with icons built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Responsive
Yes
Compact Book Quotes
A compact book quotes built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
beginner
Responsive
Yes
12 nth Selectors
A 12 nth selectors built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Features
: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.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
intermediate
Features
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.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 84+, Edge 84+, Firefox 63+, Safari 14.1+
Features
3D Stacking, Focal Blur, Staggered Hover, Perspective UI
Responsive
Yes
Interactive Morphing Task List Item
A interactive morphing task list item built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Advanced
Browser support
Modern Browsers
Features
SVG Morphing, Audio Feedback, Micro-interactions
Responsive
Yes
Interactive Vertical Parallax Cursor Navigation
A interactive vertical parallax cursor navigation built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
Cursor Image Tracking, Vertical Panning, WAAPI Animation, Fluid Typography
Responsive
Yes
Scroll-Driven Sticky Text Reveal
A scroll-driven sticky text reveal built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 115+, Edge 115+, Safari 26+
Features
Scroll-Driven Animation, Fluid Typography, Theme Switching, Sticky Highlights
Responsive
Yes

Snippets(58)

related hubs