Narrative

A Narrative block sets out a story or article using Markdown-enabled content. Narrative blocks are always set on a light steel background (bg-steel-85-light).

Narrative block structure

  • Block heading
  • An image or embedded media (optional)
    • If this element is side-aligned, it is contained within an aside
  • Block content

Narrative block variations

  • Centre aligned: Where the image is full width and the text flows underneath the image.
  • Left aligned: Where the image is aligned to the left and text flows around it on the right
  • Right aligned: Where the image is aligned to the right and text flows around it on the left
<!-- Narrative block - Left aligned -->
<h1>Lorem ipsum dolor sit amet</h1>
<aside class="pull-left half-padding">
    <figure class="image">
        <img src="https://picsum.photos/1000/562" alt="Suspendisse laoreet iaculis iaculis.">
        <figcaption>Nullam at turpis felis. Duis suscipit vulputate mi, vel efficitur justo luctus id. Aenean rhoncus eget metus eget fringilla. Aenean.</figcaption>
    </figure>
</aside>
<p>Sed sed congue massa. In commodo bibendum efficitur. Mauris viverra eros et quam auctor vulputate. In finibus ligula ac accumsan vehicula. Quisque volutpat augue nec ligula convallis, vel consectetur orci feugiat. Suspendisse scelerisque libero at fringilla pharetra. Nam ut metus.</p>
<p>Donec et augue suscipit dolor pretium posuere. Nunc malesuada aliquet nisl ut sagittis. Duis quis sem dignissim, aliquet sem sed, bibendum nibh. Vivamus sit amet augue eget ex viverra suscipit ut eget risus. Mauris in arcu neque. Donec et dictum sapien, ac finibus ipsum. Vivamus vehicula ultricies purus, nec mollis.</p>
<p>Aenean arcu tellus, feugiat id venenatis venenatis, rutrum at mauris. In scelerisque eleifend faucibus. Curabitur nec enim posuere tortor feugiat.</p>
<!-- Narrative block - Left aligned -->