Adding a related articles section with thumbnail images

Our article page is still a fairly bare-bones experience at the moment. Let's try to improve it. A common design pattern is to include a related or recommended content section at the end of an article. Let's add this to the bottom of our page. It will consist of a list of three or four articles, with thumbnails and text. Building this will help to improve our understanding of AMP's layout system.

For the list of items, we'll use an unordered list ul. Each item in the list will have an HTML5 figure element, which in turn will have a thumbnail image, amp-img, and associated text figcaption.

We'll use layout="fixed" for the thumbnail images so that they will all be a fixed size; we'll explore other options shortly (full code at /ch3/related-float.html):

<figure class="related-thumb">
  <amp-img src="img/penguin.jpg" width="125" height="75" layout="fixed">
  </amp-img>
  <figcaption>
    If a penguin can find a soul...