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.

Lorem ipsum dolor sit amet, <a href="tel:0000000000">0414001122</a> 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 varius ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a pulvinar. 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.

{ "text": "Lorem ipsum dolor sit amet, <a href=\"tel:0000000000\">0414001122</a> 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 varius ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a pulvinar. 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 { @include large-text(); margin-top: 20px; margin-bottom: 20px; line-height: 177.778%; &:first-child { margin-top: 0; } .dark-background & { @include theme('color', 'color-none', 'default-text-color-inverse'); } } /// /// 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; }