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 - Centre aligned -->
<h1>Lorem ipsum dolor sit amet</h1>
<figure class="image">
    <img src="https://picsum.photos/1600/900" alt="Praesent aliquam orci non lacus congue, sit amet porta nisl.">
    <figcaption>Mauris vehicula ac leo bibendum feugiat. Ut quis ante tortor. Nunc placerat mi leo, in mollis tellus placerat nec. Morbi.</figcaption>
</figure>
<p>Praesent in feugiat lacus, sit amet fermentum sem. Integer luctus vel leo ut ultrices. Nulla venenatis metus ut finibus rutrum. Donec posuere lorem urna, at sollicitudin nibh ornare eget. Quisque gravida, nibh sit amet sagittis ullamcorper, leo eros semper velit, eget efficitur augue nisi id enim. Suspendisse eget eros condimentum.</p>
<p>Praesent ultrices ut quam ac mollis. Suspendisse interdum sollicitudin lacus, at rhoncus nisl cursus et. Cras vitae efficitur ipsum. Integer aliquet nisl lorem, at scelerisque lacus aliquam et. Cras scelerisque sem erat, et ornare nibh faucibus sed. Ut nec sollicitudin.</p>
<!-- Narrative block - Centre aligned -->
<!-- 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 -->
<!-- Narrative block - Right aligned -->
<h1>Lorem ipsum dolor sit amet</h1>
<aside class="pull-right half-padding">
    <figure>
        <img src="https://picsum.photos/800/450" alt="Sed tristique felis">
        <figcaption>Vestibulum ut tortor ullamcorper, tristique urna in, pharetra lectus. Mauris sodales odio vel odio sagittis semper</figcaption>
    </figure>
</aside>
<p>Nunc ornare quam tincidunt augue malesuada egestas. Integer rutrum nec elit vel iaculis. Maecenas aliquam neque neque, sit amet laoreet dui blandit iaculis. Aenean enim lectus, rhoncus eu consectetur at. Praesent consectetur sapien sed tellus condimentum, sit amet sollicitudin tortor auctor. Donec in massa a tortor ullamcorper cursus. Ut hendrerit.</p>
<p>Cras quis molestie dolor. Curabitur sed lacinia est, et porttitor. In hac habitasse platea dictumst. Proin dictum sapien a sem laoreet, in aliquam arcu pellentesque. Praesent a velit non lectus. Donec egestas, massa a viverra luctus, elit sem consequat urna, a viverra lacus enim vitae quam. Interdum et malesuada fames.</p>
<!-- Narrative block - Right aligned -->