City of Ghent Style Guide

Paragraph

When to use this component

A paragraph is used to present a portion of text (a paragraph). A paragraph consists of one or more sentences.

When not to use this component

To present text that is not a complete sentence.

Composition and behavior of this component

Next to normal text, a paragraph can also contain:

  • Links (internal, external, download, mailto).
  • Words or parts of sentences emphasized by italic or bold text.

A paragraph has a certain behavior:

  • On desktop resolutions and tablets in landscape mode, a paragraph should always have a width of 7/12 based on the container. This means the container needs to make sure that paragraphs can never be bigger then 7/12 of itself.
  • On tablets in portrait mode and mobile resolutions, a paragraph should always be the full width of the container.
  • The text in a paragraph:
    • Should always have a max-width of 40 rems.
    • Can never be centered.
    • Can never be justified.

Paragraph 

<p class="{{ modifier }}">{{ text }}</p>
 
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href="https://stad.gent">Duis malesuada justo</a> 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, <a href="/some/file" download="download">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
 
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href=\"https://stad.gent\">Duis malesuada justo</a> 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, <a href=\"/some/file\" download=\"download\">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque."
}
  • Content: 
    ///
/// Helper class to align text right.
///
/// @since 3.0.0
/// @access public
/// @author Gert-Jan Meire
///
.text-right {
  text-align: right;
}

///
/// Helper class to align text left.
///
/// @since 3.0.0
/// @access public
/// @author Gert-Jan Meire
///
.text-left {
  text-align: left;
}
  • URL: /components/raw/paragraph/_paragraph.scss
  • Filesystem Path: components/21-atoms/paragraph/_paragraph.scss
  • Size: 299 Bytes