Are you ready to level up your website’s design? Dive into our extensive collection of 55+ HTML and CSS lists! We’ve curated these examples from popular platforms like CodePen and GitHub to bring you a treasure trove of inspiration.
CSS lists play a crucial role in user interface design by organizing content and enhancing visual appeal. Whether it’s bulleted lists, numbered lists, or custom styles, they provide structure and clarity to your web pages. With a stylish and functional CSS list, you can elevate the user experience and make your site more visually engaging.
Our curated collection not only showcases diverse design possibilities but also offers practical solutions to help site users navigate information effortlessly. By staying updated with the latest trends in CSS List, you can stay ahead in UI/UX design and leave a lasting impression on your audience.
Ready to explore the endless possibilities of CSS List? Click here to dive into our collection and take your website’s design to the next level!
1. CSS Pseudo Commas: Exploring comma rules in nouns and verbs
See the Pen
CSS Pseudo Commas: Exploring comma rules in nouns and verbs by S. Shahriar (@ShadowShahriar)
on CodePen.
Author: S. Shahriar @ShadowShahriar
Links: Source Code / Demo
Created on: August 14, 2021
Made with: HTML, CSS
2. Custom properties step progress indicator
See the Pen
Custom properties step progress indicator by Michelle Barker (@michellebarker)
on CodePen.
Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 28, 2022
Made with: HTML, CSS
3. UL banner cards
See the Pen
UL banner cards by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 6, 2022
Made with: HTML, CSS
4. Just Another Definition List, Grid, Sass, Responsive
See the Pen
Just Another Definition List, Grid, Sass, Responsive by Dianna Cheng (@girlgeek)
on CodePen.
Author: Dianna Cheng @girlgeek
Links: Source Code / Demo
Created on: March 5, 2021
Made with: HTML, CSS(SCSS)
5. Compact book quotes
See the Pen
Compact book quotes by lalacode (@lalacode)
on CodePen.
Author: lalacode @lalacode
Links: Source Code / Demo
Created on: June 25, 2022
Made with: HTML, CSS(Sass)
6. The Order of Operations Challenge
See the Pen
The Order of Operations Challenge #cpc-counters #codepenchallenge by Gražvydas Žilius (@deracans-the-styleful)
on CodePen.
Author: Gražvydas Žilius @deracans-the-styleful
Links: Source Code / Demo
Created on: June 8, 2022
Made with: HTML, CSS(SCSS)
7. Custom Unordered List Styles
See the Pen
Custom Unordered List Styles by Prasad D. (@prasad-d)
on CodePen.
Author: Prasad D. @prasad-d
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, CSS (SCSS)
8. Named scroll-timeline vertical
See the Pen
Named scroll-timeline vertical by utilitybend (@utilitybend)
on CodePen.
Author: utilitybend @utilitybend
Links: Source Code / Demo
Created on: February 6, 2023
Made with: HTML, CSS
9. OL standing cards
See the Pen
OL standing cards by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 7, 2022
Made with: HTML, CSS
10. “Take a number” contact list
See the Pen
"Take a number" contact list by Suzanne Aitchison (@aitchiss)
on CodePen.
Author: Suzanne Aitchison @aitchiss
Links: Source Code / Demo
Created on: January 7, 2021
Made with: HTML, CSS
11. a better ol (numbered list with circle outline)
See the Pen
a better ol (numbered list with circle outline) by mattc0m (@mattc0m)
on CodePen.
Author: Mattc0m @mattc0m
Links: Source Code / Demo
Created on: July 12, 2022
Made with: HTML, CSS(SCSS)
12. Inline lists with conditional separators
See the Pen
Inline lists with conditional separators by Christopher Kirk-Nielsen (@chriskirknielsen)
on CodePen.
Author: Christopher Kirk-Nielsen @chriskirknielsen
Links: Source Code / Demo
Created on: July 18, 2020
Made with: HTML, CSS(SCSS)
13. Codepen Team Member List – Even/Odd Styles
See the Pen
Codepen Team Member List – Even/Odd Styles by Josetxu (@josetxu)
on CodePen.
Author: Josetxu @josetxu
Links: Source Code / Demo
Created on: June 22, 2022
Made with: HTML, CSS
14. Todo List with Sticky Notes(CPC)
See the Pen
Todo List with Sticky Notes(CPC) by wheatup (@wheatup)
on CodePen.
Author: Wheatup @wheatup
Links: Source Code / Demo
Created on: April 7, 2022
Made with: HTML, CSS (SCSS), JS
15. Handwritten shopping list with custom markers
See the Pen
Handwritten shopping list with custom markers by Michelle Barker (@michellebarker)
on CodePen.
Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 28, 2022
Made with: HTML, CSS
16. Mini Insta-Friends Scrolling List Layout
See the Pen
Mini Insta-Friends Scrolling List Layout by Adam Argyle (@argyleink)
on CodePen.
Author: Adam Argyle @argyleink
Links: Source Code / Demo
Created on: October 24, 2020
Made with: HTML, CSS(PostCSS)
17. Reversed and split list
See the Pen
Reversed and split list by Michelle Barker (@michellebarker)
on CodePen.
Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 21, 2022
Made with: HTML, CSS
18. OL circle cards
See the Pen
OL circle cards by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 5, 2022
Made with: HTML, CSS
19. Forbes Leaderboard
See the Pen
Forbes Leaderboard by Mark Eriksson (@Markshall)
on CodePen.
Author: Mark Eriksson @Markshall
Links: Source Code / Demo
Created on: June 17, 2020
Made with: HTML, CSS(SCSS)
20. Reversed and split list with ::before
See the Pen
Reversed and split list with ::before by Michelle Barker (@michellebarker)
on CodePen.
Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: June 21, 2022
Made with: HTML, CSS
21. CSS3 List * Spinning Heart list-style | CPC
See the Pen
CSS3 List * Spinning Heart list-style | CPC by MOZZARELLA (@TheMOZZARELLA)
on CodePen.
Author: mozzarella @TheMOZZARELLA
Links: Source Code / Demo
Created on: April 4, 2022
Made with: HTML, CSS
22. Checklist animation – Only CSS
See the Pen
Checklist animation – Only CSS by Milan Raring (@milanraring)
on CodePen.
Author: Milan Raring
Links: Source Code / Demo
Created on: March 5, 2020
Made with: HTML, CSS (SCSS)
23. Morphing Moonrocks
See the Pen
Morphing Moonrocks by Chris Coyier (@chriscoyier)
on CodePen.
Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: April 7, 2022
Made with: HTML (Markdown) , CSS(SCSS)
24. UL cards with depth
See the Pen
UL cards with depth by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 25, 2022
Made with: HTML, CSS
25. Pretty Sticky
See the Pen
Pretty Sticky by Burmese Potato (@BurmesePotato)
on CodePen.
Author: Burmese Potato @BurmesePotato
Links: Source Code / Demo
Created on: June 17, 2020
Made with: HTML, CSS
26. Interactive Loose-Leaf Todo List
See the Pen
Interactive Loose-Leaf Todo List by Ian (@IanWoodard)
on CodePen.
Author: Ian @IanWoodard
Links: Source Code / Demo
Created on: April 5, 2022
Made with: HTML, CSS (SCSS)
27. UL-circles with icons
See the Pen
UL-circles with icons by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: February 20, 2022
Made with: HTML, CSS
28. 12 nth Selectors
See the Pen
12 nth Selectors by Gabriele Corti (@borntofrappe)
on CodePen.
Author: Gabriele Corti @borntofrappe
Links: Source Code / Demo
Created on: December 6, 2019
Made with: HTML, CSS (SCSS)
29. Todo list with Little Details (cpc)
See the Pen
Todo list with Little Details (cpc) by Amit Sheen (@amit_sheen)
on CodePen.
Author: Amit Sheen @amit_sheen
Links: Source Code / Demo
Created on: April 5, 2022
Made with: HTML, CSS(SCSS)
30. Simple CSS check list
See the Pen
Simple CSS check list by Garrett (@gnevin)
on CodePen.
Author: Garrett @gnevin
Links: Source Code / Demo
Created on: April 5, 2019
Made with: HTML, CSS
31. UL icon cards
See the Pen
UL icon cards by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 5, 2022
Made with: HTML, CSS
32. Stars list ⭐
See the Pen
Stars list ⭐ by leimapapa (@leimapapa)
on CodePen.
Author: leimapapa @leimapapa
Links: Source Code / Demo
Created on: April 4, 2022
Made with: HTML, CSS
33. Gradient Ordered List
See the Pen
Gradient Ordered List by Erin E. Sullivan (@erinesullivan)
on CodePen.
Author: Erin E. Sullivan @erinesullivan
Links: Source Code / Demo
Created on: May 15, 2019
Made with: HTML, CSS (SCSS)
34. Sticky Definition List
See the Pen
Sticky Definition List by Chris Coyier (@chriscoyier)
on CodePen.
Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: October 23, 2021
Made with: HTML, CSS
35. Transfrom Skew Property and nice List styles
See the Pen
Transfrom Skew Property and nice List styles by vikas singh (@vikassingh1111)
on CodePen.
Author: Vikas singh @vikassingh1111
Links: Source Code / Demo
Created on: March 13, 2019
Made with: HTML, CSS
36. ol-cards – single element
See the Pen
cpc-days | ol-cards – single element by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: February 19, 2022
Made with: HTML, CSS
37. To-do list
See the Pen
To-do list by Sabine Robart (@_Sabine)
on CodePen.
Author: Sabine Robart @_Sabine
Links: Source Code / Demo
Created on: February 1, 2019
Made with: HTML, CSS (SCSS)
38. Pure CSS To-Do
See the Pen
Pure CSS To-Do by Adir (@Adir-SL)
on CodePen.
Author: Adir @Adir-SL
Links: Source Code / Demo
Created on: August 22, 2021
Made with: HTML, CSS
39. CSS Gradient Counter List
See the Pen
CSS Gradient Counter List by Mattia Astorino (@equinusocio)
on CodePen.
Author: Mattia Astorino @equinusocio
Links: Source Code / Demo
Created on: March 7, 2019
Made with: HTML(Pug), CSS (PostCSS)
40. Ordered List Arrow Cards
See the Pen
Ordered List Arrow Cards by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: December 24, 2021
Made with: HTML, CSS
41. CSS ordered list with leading zero
See the Pen
CSS ordered list with leading zero by Sven Wolfermann (@maddesigns)
on CodePen.
Author: Oven Wolfermann @maddesigns
Links: Source Code / Demo
Created on: February 22, 2016
Made with: HTML, CSS(SCSS)
42. list style – Ol and ul style
See the Pen
list style – Ol and ul style by WILDER TAYPE (@wtaype)
on CodePen.
Author: WILDER TAYPE @wtaype
Links: Source Code / Demo
Created on: December 22, 2016
Made with: HTML, CSS
43. File manger selectable list (VanillaJS)
See the Pen
File manger selectable list (VanillaJS) by Ahmad Nasr (@ahmadnasr)
on CodePen.
Author: Ahmed Nasr @ahmadnasr
Links: Source Code / Demo
Created on: December 18, 2018
Made with: HTML, CSS(SCSS), JavaScript
44. Checkboxes Progress Bar w/ pure CSS
See the Pen
Checkboxes Progress Bar w/ pure CSS #CodepenChallenge by Miguel (@ruidovisual)
on CodePen.
Author: Miguel @ruidovisual
Links: Source Code / Demo
Created on: July 17, 2018
Made with: HTML (Haml), CSS (Sass)
45. Custom list style via clean css
See the Pen
Custom list style via clean css by Serluck (@serluk)
on CodePen.
Author: Serluck @serluk
Links: Source Code / Demo
Created on: September 23, 2014
Made with: HTML, CSS
46. CSS List
See the Pen
100dayscss #27 by Daiane Assen (@INapta)
on CodePen.
Author: Daiane Assen @INapta
Links: Source Code / Demo
Created on: February 1, 2019
Made with: HTML, CSS(SCSS)
47. List UI
See the Pen
List UI by Collin Smith (@collincodes)
on CodePen.
Author: Collin Smith @collincodes
Links: Source Code / Demo
Created on: April 20, 2018
Made with: HTML(Pug), CSS (Stylus)
48. Cards – ListView
See the Pen
Cards – ListView by Sowmya Seshadri (@sowmyaseshadri)
on CodePen.
Author: Sowmya Seshadri @sowmyaseshadri
Links: Source Code / Demo
Created on: September 13, 2018
Made with: HTML, CSS(SCSS)
49. Benutzerdefinierte Listenpunkte
See the Pen
Benutzerdefinierte Listenpunkte by Dennis Kovarik (@denniskovarik)
on CodePen.
Author: Dennis Kovarik @denniskovarik
Links: Source Code / Demo
Created on: March 1, 2018
Made with: HTML, CSS(SCSS)
50. Full Circle Note Taking
See the Pen
Full Circle Note Taking by Tony Banik (@banik)
on CodePen.
Author: Tony Banik @banik
Links: Source Code / Demo
Created on: September 1, 2018
Made with: HTML (Slim), CSS(SCSS), JS
51. CSS-only numbered lists with “drop” shapes
See the Pen
CSS-only numbered lists with "drop" shapes by Ines Montani (@ines)
on CodePen.
Author: Ines Montani @ines
Links: Source Code / Demo
Created on: August 8, 2017
Made with: HTML(Pug), CSS
52. Checklist Demo (CSS Only)
See the Pen
Checklist Demo (CSS Only) by Christiaan Snoei (@christiaansnoei)
on CodePen.
Author: Christiaan Snoei @christiaansnoei
Links: Source Code / Demo
Created on: May 27, 2019
Made with: HTML, CSS(SCSS)
53. CSS3 Checklist
See the Pen
CSS3 Checklist by Tran Nhat Anh (@japananh)
on CodePen.
Author: Tran Nhat Anh @japananh
Links: Source Code / Demo
Created on: April 20, 2019
Made with: HTML(Pug), CSS (Sass)
54. To Do List
See the Pen
To Do List by Asha Holland (@HollandAsh)
on CodePen.
Author: Asha Holland @HollandAsh
Links: Source Code / Demo
Created on: May 17, 2018
Made with: HTML(Pug), CSS (Stylus)
55. Flexbox Menu List
See the Pen
Flexbox Menu List by AyaOki (@mazereeta)
on CodePen.
Author: aMEya @mazereeta
Links: Source Code / Demo
Created on: August 14, 2019
Made with: HTML(Pug), CSS (SCSS)
56. List Styles
See the Pen
List Styles by Cody McAfee (@gcmcafee)
on CodePen.
Author: Cody McAfee @gcmcafee
Links: Source Code / Demo
Created on: December 19, 2014
Made with: HTML, CSS (Less)
57. Custom Unordered List Styles
See the Pen
Custom Unordered List Styles by Prasad D. (@prasad-d)
on CodePen.
Author: Prasad D. @prasad-d
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, CSS (SCSS)