Lens design system

Narrative: Right 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 - 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 -->