Prose - With lede

Open fullscreen

<div class="mp o-prose u-flow--prose o-prose--with-lede u-wrap--content">
  <h2>Heading two</h2>
  <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
  <h3>Heading three</h3>
  <p>Curabitur blandit tempus porttitor. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <blockquote>
    <p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  </blockquote>
  <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
  <ul>
    <li>Donec sed odio dui.</li>
    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
    <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
  </ul>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
  <ol>
    <li>Donec sed odio dui.</li>
    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
    <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
  </ol>
  <p>Curabitur <code>blandit tempus</code> porttitor. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <pre>
  { "title": "Prose"}</pre>
  <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

{
  "content": "<h2>Heading two</h2>\n    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>\n    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>\n    <h3>Heading three</h3>\n    <p>Curabitur blandit tempus porttitor. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>\n    <blockquote>\n      <p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>\n    </blockquote>\n    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>\n    <ul>\n      <li>Donec sed odio dui.</li>\n      <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>\n      <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>\n    </ul>\n    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>\n    <ol>\n      <li>Donec sed odio dui.</li>\n      <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>\n      <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>\n    </ol>\n    <p>Curabitur <code>blandit tempus</code> porttitor. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>\n    <pre>\n{\n  \"title\": \"Prose\"\n}</pre>\n    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>",
  "classes": "o-prose--with-lede"
}

The prose component assumes it will be passed WYSIWG content from a CMS. For this reasons, it is quite opinionated about how it styles child elements. For example: where as in most components a <h2> will be 1em until we provide a sizing class, a <h2> in prose will be given a set size. This means we don't have to filter our CMS output and add additional styling classes.

Props

Name	Type	Description
content	html	HTML from a WYSIWYG editor
classes	Addtional class attributes

CSS modifiers

Name	Type	Description
o-prose--left-blockquote	Remove the indentation of the blockquote
o-prose--with-lede	Emphasise the first paragraph of the prose