Collection of hand-picked free HTML and CSS list style code examples from Codepen, GitHub, and other resources. Update of May 2021 collection. Twenty nine new examples.
Related Articles
Links
Made with
- HTML / CSS
About a code
Named Scroll-Timeline Vertical
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
A Better OL (Numbered List with Circle Outline)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Handwritten Shopping List with Custom markers
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Custom Properties Step Progress Indicator
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About a code
Compact Book Quotes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tailwind.css

Links
Made with
- HTML / CSS
About a code
Codepen Team Member List - Even/Odd Styles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Reversed and Split List
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Reversed and Split List with ::before
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
The Order of Operations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Todo List with Sticky Notes
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Markdown) / CSS (SCSS)
About a code
Morphing Moonrocks
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Interactive Loose-Leaf Todo List
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Todo List with Little Details
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Stars List
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS3 List. Spinning Heart List-Style
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
UL Cards with Depth
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS
About a code
OL Standing Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS
About a code
UL Banner Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS
About a code
OL Circle Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS
About a code
UL Icon Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS
About a code
UL-Circles with Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS
About a code
OL Cards - Single Element
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Ordered List Arrow Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Sticky Definition List
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS To-Do
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Just Another Definition List, Grid, Sass, Responsive
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Take a Number Contact List
A little experiment displaying contact links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS (PostCSS)
About a code
Mini Insta-Friends Scrolling List Layout
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Inline Lists with Conditional Separators
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Forbes Leaderboard
A quick leaderboard for the forbes under 40 list.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pretty Sticky
A simple example highlighting how awesome CSS position: sticky
can be.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Checklist Animation - Only CSS
Simple checklist animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
12nth Selectors
CSS list with custom counter and scroll effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Gradient Ordered List
A simple, styled ordered list using SCSS and HTML5. The gradient background transitions from one, to another, and back again. IE11 friendly.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Simple CSS Check List
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Nice List Styles
transfrom: skew
property and nice list styles.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (PostCSS)
About the code
CSS Gradient Counter List
An example of CSS counter with a fixed background gradient.
Compatible browsers: Chrome, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
To-Do List
Animated checkmark UI.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
To-Do List
To-Do list with UI animation and microinteractions.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
File Manger Selectable List
Click on a list item to select it. Hold Ctrl
to multiselect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Cards - ListView
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Slim) / CSS (SCSS) / JavaScript
About the code
Full Circle Note Taking
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (Sass)
About a code
Checkboxes Progress Bar with Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
List UI
Simple ordered list UI concept. Making use of pseudo elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Pug) / CSS
About the code
CSS-Only Numbered Lists with Drop Shapes
Styled numbered list using CSS counters and pseudo elements for drop-shaped backgrounds.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Ordered List with Leading Zero
CSS ordered list with leading zero and different number color.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -