Mirage: BGA styles

4.13 components.prose Prose

Within articles, etc., we want the main text to be styled with serif font. By applying .prose to the wrapping container, all paragraphs will be styled with serif font.

Example

Sample heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat ipsum sit amet urna facilisis, ac condimentum lorem eleifend.

Maecenas imperdiet sed ex dapibus tristique. Aenean ligula erat, maximus malesuada placerat nec, pulvinar a neque.

Markup: components/prose/prose.twig

<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prose"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Sample heading<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat ipsum sit amet urna facilisis, ac condimentum lorem eleifend.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Maecenas imperdiet sed ex dapibus tristique. Aenean ligula erat, maximus malesuada placerat nec, pulvinar a neque.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>

Source: components/prose/_prose.scss, line 1