UNI is still under development — Please check back at the end of March
Skip to content

Prose

Inline

Style arbitrary text markup (e.g., Markdown) with .prose:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Example image

Ut enim ad minim

Sunt in culpa qui officia deserunt mollit:

  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt
  • Ut labore et dolore magna aliqua
  • Quis nostrud exercitation ullamco
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. See the documentation for more details.

<div class="prose">
  <h2>Title</h2>
  <p>Introduction paragraph...</p>
  <img src="screenshot.png" alt="Screenshot" />
  <h3>Section heading</h3>
  <p>Content with a list:</p>
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <blockquote>A notable quote.</blockquote>
</div>

Cards

Add .card or .card.large to separate from main content:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Duis aute irure

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt
  • Ut labore et dolore magna aliqua
  • Quis nostrud exercitation ullamco
<div class="prose card large">
  <h2>Title</h2>
  <p>Introduction paragraph...</p>
  <h3>Section heading</h3>
  <p>Content with a list:</p>
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</div>