Lens design system

Narrative: Centre aligned

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 -->