CSScrafter logo

CSS Styles for List Block

If you are wondering about getting CSS styles for the List Block of your WordPress Block Editor, you are in the right place, buddy.

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"contrastcolor","textColor":"custom-dark-blue-2","className":"lists1 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists1 .lists-items {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/list-icon.png\u0022);\nmargin:5px;}\n"} -->
<ul class="lists1 ticss-6f0b5036 has-custom-dark-blue-2-color has-contrastcolor-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists1 .lists-items {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/list-icon.png");
margin:5px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","className":"lists2 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists2 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/check-list-icon-2-.png\u0022);\nmargin:5px;}\n"} -->
<ul class="lists2 ticss-6f0b5036 has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists2 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/check-list-icon-2-.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","className":"lists3 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists3 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/leaf-list-icon-3.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists3 ticss-6f0b5036 has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists3 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/leaf-list-icon-3.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","className":"lists5 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists5 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/circle-list-icon-5.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists5 ticss-6f0b5036 has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists5 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/circle-list-icon-5.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","className":"lists4 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists4 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/food-list-icon-4.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists4 ticss-6f0b5036 has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists4 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/food-list-icon-4.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"inputbg","className":"lists6 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists6 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/circle-list-icon-6.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists6 ticss-6f0b5036 has-inputbg-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists6 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/circle-list-icon-6.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"inputbg","className":"lists7 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists7 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/circle-list-icon-7.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists7 ticss-6f0b5036 has-inputbg-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists7 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/circle-list-icon-7.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"inputbg","className":"lists8 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists8 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/square-list-icon-8.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists8 ticss-6f0b5036 has-inputbg-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists8 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/square-list-icon-8.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"inputbg","className":"lists8 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists8 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/square-list-icon-8.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists8 ticss-6f0b5036 has-inputbg-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists8 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/square-list-icon-8.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"inputbg","className":"lists10 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists10 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/pin-list-icon-10.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists10 ticss-6f0b5036 has-inputbg-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists10 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/pin-list-icon-10.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"inputbg","className":"lists11 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists11 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/star-list-icon-11.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists11 ticss-6f0b5036 has-inputbg-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists11 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/star-list-icon-11.png");
margin:6px;}

list Block Icon Style –

  • CSS Blocks
  • CSS Image
  • CSS Cards

To get the Block or CSS click here  ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"inputbg","className":"lists12 ticss-6f0b5036","hasCustomCSS":true,"customCSS":"    .lists12-item1 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/star-list-icon-11.png\u0022);\nmargin:6px;}\n    .lists12-item2 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/check-list-icon-2-.png\u0022);\nmargin:6px;}\n\n    .lists12-item3 {\n      list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/leaf-list-icon-3.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists12 ticss-6f0b5036 has-inputbg-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists12-item1"} -->
<li class="lists12-item1">CSS Blocks</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists12-item2"} -->
<li class="lists12-item2">CSS Image</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"lists12-item3"} -->
<li class="lists12-item3">CSS Cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

    .lists12-item1 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/star-list-icon-11.png");
margin:6px;}
    .lists12-item2 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/check-list-icon-2-.png");
margin:6px;}

    .lists12-item3 {
      list-style-image: url("https://csscrafter.com/wp-content/uploads/2023/09/leaf-list-icon-3.png");
margin:6px;}

Grab Your CSS Styles Here

Get All CSS Items In One Place

If you want to get all CSS items in one place, then visit here. We have added all the items listed there, and you will get all the resources of CSScrafter for free in one place.

All CSS Items In One Place →