City of Ghent Style Guide - Version 2.10.0

Paragraph: Caption Text 

<p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong>    ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus
    ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
 
<p class="{{ modifier }}">{{ text|default(text) }}</p>
 
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.",
  "modifier": "caption"
}
  • Content: 
    %small,
.small,
.caption,
.description {
  font-size: .8rem;
  line-height: 1.5em;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}
  • URL: /components/raw/paragraph/_paragraph.scss
  • Filesystem Path: components/21-atoms/paragraph/_paragraph.scss
  • Size: 160 Bytes

Paragraphs

A paragraph has a certain behavior.

  • It should always have a width of 7/12 (except for mobile) based on the container. This means the container needs to make sure that paragraphs can never be bigger then 7/12 of itself.
  • For a mobile layout a paragraph is always full width.
  • It always has a max-width of 40 rems on desktop.
  • A paragraph can never be centered!
  • A paragraph can never be justified!

Examples of paragraphs are defined in paragraph variants: