Freebie: 12 Ready To Use Templates For List Pages

Freebie: 12 Ready To Use Templates For List Pages

Here we have for you a collection of 12 lovely free templates for displaying various item lists! We’ve created them without relying on any frameworks or libraries, only vanilla HTML and CSS have been used. Because of this, they are very easy to implement and can pair well with all kinds of websites, apps and blogs.

The Templates

The templates are separated in 4 different groups. Here’s what we have:

  • 3 Product lists, perfect for online shops and catalogs.
  • 4 Article lists for presenting blog posts with thumbnails, titles and descriptions.
  • 2 Image lists for displaying galleries and photo albums.
  • 3 User profile lists showing quick information about a person and their avatar.

You can download the entire pack from the Download button near the top of the page.

Using the Templates

After you’ve downloaded them, placing any of the templates in you projects is pretty straightforward. Just follow these easy steps:

  1. Choose the template you like best.
  2. Open it’s example, copy the HTML inside the <body> tag and paste it wherever you want the list in your page.
  3. Get the corresponding CSS file for this particular template and link it to your project (the stylesheets are located in /assets/css). Our CSS is self contained and won’t interfere with the rest of your styles.
  4. Replace our placeholder content with your text and images.
  5. Done!
User Profiles Small

User Profiles Small

Free for Commercial Use

All 12 templates are completely free of charge and don’t require any form of attribution. You have all rights to customize them and use them however you want, in both personal and commercial projects (our license page). Enjoy!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.



  1. andymil80 says:


  2. Leoni Benghiat says:

    Thank you so much. Just what I was looking for! Really greatly appreciated.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text]( for links