Lil Regie's front-end workshop


Biographies list

A series of bios of Lil Regie staff, (or any people for that matter)

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<ul class="list_biographies">
  <li>
    <img src="https://placekitten.com/300/300" width="300" height="300" alt="Doris" loading="lazy">
    <div>
      <p>
        <b>
          Doris – Chef’s assistant
        </b>
      </p>
      <p>
        You’ll find Doris in the kitchen, begging for food scraps, and chasing the mice out into the backyard.
      </p>
      <p>
        The way to Doris’ heart is with plenty of tasty morsels.
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/500/500" width="500" height="500" alt="Mr. Wigglesworth" loading="lazy">
    <div>
      <p>
        <b>
          Mr. Wigglesworth – Counsellor
        </b>
      </p>
      <p>
        When you’re feeling down, Mr. Wigglesworth is there to help you. He is the bedrock of mood.
      </p>
      <p>
        He certainly is a charmer, a good listener, and (strange for a cat) is quite responsive.
      </p>
    </div>
  </li>
  <li>
    <img src="https://placekitten.com/160/160" width="160" height="160" alt="Scratchy" loading="lazy">
    <div>
      <p>
        <b>
          Scratchy – Head Instigator
        </b>
      </p>
      <p>
        Furniture beware.
      </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 Ruled list and Stripped list

  • Very similar to Icon marker list

Source files