Lil Regie's front-end workshop


Icon marker list

This list uses images or icons as markers for each list item.

Example

0 375 640 768 1024

Open in a new window

Code sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul class="list_icons">
  <li>
    <img src="https://placekitten.com/300/300" width="300" height="300" alt="" loading="lazy">
    <div>
      <p>
        <b>It’s so easy.</b><br>
        Set your event up in no time. No training required - just enter the details, test and publish!
      </p>
      <p>
        Need more convincing?
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/200/200" width="200" height="200" alt="" loading="lazy">
    <div>
      <p>
        <b>Flexible ticket options.</b><br>
        Specify different ticket types (eg early bird, member price, student price).
      </p>
    </div>
  </li>
</ul>

Usage notes

  • No elements are allowed between the <ol> or <ul> and <li> elements.

  • Please use square images where possible.

  • This component extends Stripped list

  • Very similar to Biographies List

Source files