Lil Regie's front-end workshop


Blog posts list

Displays an image and other important fields for a list of blog posts.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<nav class="list_blog_posts">
  <article>
    <a href="#">
      <picture>
        <img src="https://placekitten.com/600/400" width="600" height="400" alt="" loading="lazy">
      </picture>
      <p class="heading heading_paragraph">
        Sometimes we can type too much, and that can cause problems
      </p>
      <p class="paragraph paragraph_fineprint">
        <b>By Jesse Ka</b> on
        <time datetime="2021-06-12">12 June 2021</time>
      </p>
    </a>
  </article>
  <article>
    <a href="#">
      <picture>
        <img src="https://placekitten.com/300/200" width="300" height="200" alt="" loading="lazy">
      </picture>
      <p class="heading heading_paragraph">
        Hooray! A brand new year.
      </p>
      <p class="paragraph paragraph_fineprint">
        <b>By Robin Ento</b> on
        <time datetime="2021-06-06">6 June 2021</time>
      </p>
    </a>
  </article>
  <article>
    <a href="#">
      <picture>
        <img src="https://placekitten.com/900/600" width="900" height="600" alt="" loading="lazy">
      </picture>
      <p class="heading heading_paragraph">
        Events, overwhelming.
      </p>
      <p class="paragraph paragraph_fineprint">
        <b>By Jesse Ka</b> on
        <time datetime="2021-05-28">28 May 2021</time>
      </p>
    </a>
  </article>
  <article>
    <a href="#">
      <picture>
        <img src="https://placekitten.com/720/480" width="720" height="480" alt="" loading="lazy">
      </picture>
      <p class="heading heading_paragraph">
        On getting the right kind of news of your event out there
      </p>
      <p class="paragraph paragraph_fineprint">
        <b>By Jesse Ka</b> on
        <time datetime="2021-05-14">14 May 2021</time>
      </p>
    </a>
  </article>
  <article>
    <a href="#">
      <picture>
        <img src="https://placekitten.com/810/540" width="810" height="540" alt="" loading="lazy">
      </picture>
      <p class="heading heading_paragraph">
        Simple registrations
      </p>
      <p class="paragraph paragraph_fineprint">
        <b>By Robin Ento</b> on
        <time datetime="2021-04-06">6 April 2021</time>
      </p>
    </a>
  </article>
  <article>
    <a href="#">
      <picture>
        <img src="https://placekitten.com/600/400" width="600" height="400" alt="" loading="lazy">
      </picture>
      <p class="heading heading_paragraph">
        How Lil Regie works behind the scenes
      </p>
      <p class="paragraph paragraph_fineprint">
        <b>By Really-long Name-Surname</b> on
        <time datetime="2020-09-28">28 September 2020</time>
      </p>
    </a>
  </article>
</nav>

Usage notes

  • The layout of this list relies on correct and consistent image sizing.

  • Each image must share the same ratio of width to height as its peers.

  • Each image must be at least 1000px wide.

  • The datetime attribute of the <time> element must be an ISO 8601 date.

Source files