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

  1. Bootstrap Lists
  2. jQuery Lists
  3. Tailwind Lists

Author

  • utilitybend

Made with

  • HTML / CSS

About a code

Named Scroll-Timeline Vertical

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: A Better OL (Numbered List with Circle Outline)

Author

  • mattc0m

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: -

Demo image: Handwritten Shopping List with Custom markers

Author

  • Michelle Barker

Made with

  • HTML / CSS

About a code

Handwritten Shopping List with Custom markers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Custom Properties Step Progress Indicator

Author

  • Michelle Barker

Made with

  • HTML / CSS

About a code

Custom Properties Step Progress Indicator

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Smagin ilya

Made with

  • HTML / CSS (Sass)

About a code

Compact Book Quotes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tailwind.css

Demo image: Codepen Team Member List - Even/Odd Styles

Author

  • Josetxu

Made with

  • HTML / CSS

About a code

Codepen Team Member List - Even/Odd Styles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Reversed and Split List

Author

  • Michelle Barker

Made with

  • HTML / CSS

About a code

Reversed and Split List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Reversed and Split List with ::before

Author

  • Michelle Barker

Made with

  • HTML / CSS

About a code

Reversed and Split List with ::before

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: The Order of Operations

Author

  • Gražvydas Žilius

Made with

  • HTML / CSS (SCSS)

About a code

The Order of Operations

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • wheatup

Made with

  • HTML / CSS (SCSS) / JS

About a code

Todo List with Sticky Notes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chris Coyier

Made with

  • HTML (Markdown) / CSS (SCSS)

About a code

Morphing Moonrocks

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Interactive Loose-Leaf Todo List

Author

  • Ian

Made with

  • HTML / CSS (SCSS)

About a code

Interactive Loose-Leaf Todo List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

Todo List with Little Details

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Stars List

Author

  • leimapapa

Made with

  • HTML / CSS

About a code

Stars List

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS3 List. Spinning Heart List-Style

Author

  • MOZZARELLA

Made with

  • HTML / CSS

About a code

CSS3 List. Spinning Heart List-Style

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: UL Cards with Depth

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

UL Cards with Depth

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: OL Standing Cards

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

OL Standing Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: UL Banner Cards

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

UL Banner Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: OL Circle Cards

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

OL Circle Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: UL Icon Cards

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

UL Icon Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: UL-Circles with Icons

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

UL-Circles with Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: OL Cards - Single Element

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

OL Cards - Single Element

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Ordered List Arrow Cards

Author

  • Mark Boots

Made with

  • HTML / CSS

About a code

Ordered List Arrow Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chris Coyier

Made with

  • HTML / CSS

About a code

Sticky Definition List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Adir

Made with

  • HTML / CSS

About a code

Pure CSS To-Do

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • S. Shahriar

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: -

Demo image: Just Another Definition List, Grid, Sass, Responsive

Author

  • Dianna Cheng

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: -

Demo image: Take a Number Contact List

Author

  • Suzanne Aitchison

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

Demo image: Mini Insta-Friends Scrolling List Layout

Author

  • Adam Argyle

Made with

  • HTML / CSS (PostCSS)

About a code

Mini Insta-Friends Scrolling List Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Christopher Kirk-Nielsen

Made with

  • HTML / CSS

About a code

Inline Lists with Conditional Separators

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mark Eriksson

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: -

Author

  • Burmese Potato

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: -

Author

  • Milan Raring

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: -

Author

  • Gabriele Corti

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: -

Demo image: Gradient Ordered List

Author

  • Erin E. Sullivan

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: -

Demo image: Simple CSS Check List

Author

  • Garrett

Made with

  • HTML / CSS

About a code

Simple CSS Check List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • vikas singh

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: -

Author

  • Mattia Astorino

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: -

Author

  • Sabine Robart

Made with

  • HTML / CSS (SCSS)

About the code

To-Do List

Animated checkmark UI.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Daiane Assen

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: -

Author

  • Ahmed Nasr

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: -

Author

  • Sowmya Seshadri

Made with

  • HTML / CSS (SCSS)

About the code

Cards - ListView

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Tony Banik

Made with

  • HTML (Slim) / CSS (SCSS) / JavaScript

About the code

Full Circle Note Taking

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Miguel

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: -

Author

  • Collin Smith

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: -

Demo image: CSS-Only Numbered Lists with Drop Shapes

Author

  • Ines Montani

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: -

Demo image: CSS Ordered List with Leading Zero

Author

  • Sven Wolfermann

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: -