https://wplabo.idea-hack.com/blog/code-catalog/frontend/15455/
【Gutenberg Compatible】 Best   33 list style templates

【Gutenberg Compatible】 Best 33 list style templates

Beautiful Design lets user feel good, and stay on your site for a long time. And also, you will be easy to get repeat users.
In this Article. I will provide design templates of list style.

Before Starting

About third party library

I will use following libraries. If you use my design recipes, please load these libraries before using.

  • Font Awesome5 (https://fontawesome.com)

Supported browser

Following browsers support sample code. These are same as Bootstrap4 and above..

Mobile Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Desktop Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Table source: Bootsteap4

Pattern1

  • List Text
  • List Text
html
<div class="lists_wrap1">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap1 {
  margin-bottom: 20px;
}

div.lists_wrap1 ul, div.lists_wrap1 ol {
  background-color: #fcfcfc;
  color: #000000;
  border: 3px solid #0693e3;
  padding: 10px;
  text-align: left;
}

Pattern2

  • List Text
  • List Text
html
<div class="lists_wrap2">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap2 {
  margin-bottom: 20px;
}

div.lists_wrap2 ul, div.lists_wrap2 ol {
  background-color: #eeeeee;
  color: #000000;
  border: 3px double #0693e3;
  border-radius: 16px;
  padding: 10px;
  text-align: left;
}

Pattern3

If you liked this article
please click on the "Like!".

Follow on Twetter !

Related Posts