10+ CSS lists (latest collection)

CSS | Updated on
Latest & unique collection of hand-picked free HTML and CSS lists examples with codes. Updated on March 2022
Editor
Example of Ordered Lists Arrrow Cards
Author Mark Boots
Demo & Code
Tech used HTML / CSS
What is this?

Ordered List Arrow Cards

css list style type numeric, cool css lists, css lists examples

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
Example of Templat Fancy List
Author Fred
Demo & Code
Tech used HTML / CSS / JS
What is this?

Template – Fancy List

css lists without bullets, css list style type icon svg, css lists templates

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
Example of Featured List Pure Html Css
Author Selim Rana
Demo & Code
Tech used HTML / CSS (SCSS)
What is this?

Featured List pure html css

css list style type image, cool css lists, css list style type numeric

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
Example of Custom Bullet Points
Author PSR
Demo & Code
Tech used HTML / CSS
What is this?

Custom Bullet Points

how to style list item with css, css list style type icon, list style css codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
Example of Cards list view
Author Sowmya Seshadri
Demo & Code
Tech used HTML / CSS (SCSS)
What is this?

Cards – ListView

html css list item hover effects, css list style examples, css list item design with css

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Burmese Potato
Demo & Code
Tech used HTML / CSS
What is this?

Pretty Sticky

css list design, css list style type numeric, list style css codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Mark Eriksson
Demo & Code
Tech used HTML / CSS / JS
What is this?

Forbes Leaderboard

html css list item hover effects, css list style type image, list style css codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Daiane Assen
Demo & Code
Tech used HTML / CSS (SCSS)
What is this?

100dayscss #27

cool css lists, html css list item effects, todo list using html css

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
Example of Css list playground
Author Iresheep
Demo & Code
Tech used HTML / CSS
What is this?

Css List Playground

list style css codepen, css list style type numeric, css lists without bullets

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
Example of Css only numbered lists with drop shapes
Author Ines Montani
Demo & Code
Tech used HTML / CSS
What is this?

CSS-only numbered lists with “drop” shapes

css list style type numeric, css lists examples, css list item design with css

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No

Subscribe to our Youtube channel for regular tutorial videos on WordPress, Elementor, Web Design & Development, Website & Social Media strategies, etc. We also recommend you to check this “Essential Website Features” article to create a better website.

Hooray! 🎉 Our Ultimate Figma Mega Course is live for you!

Enrol Now
X
Cookie settings

Cookies allow us to better serve you. We collect information about the use of our website. You can manage your cookie settings below.

Essential cookies

Essential cookies are necessary for the functioning and development of our website. They do not store information that could immediately identify you.

Visitor measurement and analytics

We use the Google Analytics cookies to track visitor behavior and measure our website performance.

Powered by  GDPR Cookie Compliance