Paragraphs

Guidelines

We suggest to use classes also for default elements like headings. Link will come soon to provide reasoning behind.

To do

  • Better line height needs to be agreed and added.
  • Explain when body copy should change size.
<!-- Default -->
<p class="lbh-u-p lbh-u-p--default">A 19px body copy paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.</p>

<!-- Lede -->
<p class="lbh-u-p lbh-u-p--lede">A 24px lead paragraph with some longer text so that you can see how it wraps.</p>

<!-- Small -->
<p class="lbh-u-p lbh-u-p--small">A 16px supporting text paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.</p>

  • Content:
    .lbh-u-p {
        max-width: var(--width-main);
    }
    
    .lbh-u-p--default {
        font-size: var(--font-size-paragraph-default);
    }
    
    .lbh-u-p--lede {
        font-size: var(--font-size-paragraph-lede);
    }
    
    .lbh-u-p--small {
        font-size: var(--font-size-paragraph-small);
    }
  • URL: /components/raw/paragraphs/paragraphs.css
  • Filesystem Path: components/01-particles/04-paragraphs/paragraphs.css
  • Size: 258 Bytes