Pattern Library

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum vitae quam vel consectetur. Morbi posuere ex quis quam tincidunt ullamcorper. Etiam at arcu vitae dui dictum pharetra a non elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non aliquet neque. Pellentesque vel metus ac tellus aliquam rhoncus elementum et lectus. Pellentesque suscipit enim viverra, egestas nisi in, vehicula justo. Nulla mollis ex sit amet iaculis varius. 
</p>

• Default paragraph font-size 16px

Pattern scope:

Atom – The smallest possible pattern, independent

Relevant assets:

Stylesheets:

• Shared stylesheets [See index.css]
• /css/patterns/paragraph.css

• Scheme: intro 

  The paragraph font size is 18px

  Example

  Open type in a new window

  Code sample

  <p data-scheme="intro">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum vitae quam vel consectetur. Morbi posuere ex quis quam tincidunt ullamcorper. Etiam at arcu vitae dui dictum pharetra a non elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non aliquet neque. Pellentesque vel metus ac tellus aliquam rhoncus elementum et lectus. Pellentesque suscipit enim viverra, egestas nisi in, vehicula justo. Nulla mollis ex sit amet iaculis varius. 
  </p>

  Notes

  • Use the attribute: data-scheme="intro".
• Scheme: footnote 

  • The paragraph font size is 14px
  • Makes the font-colour grey

  Example

  Open type in a new window

  Code sample

  <p data-scheme="footnote">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum vitae quam vel consectetur. Morbi posuere ex quis quam tincidunt ullamcorper. Etiam at arcu vitae dui dictum pharetra a non elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non aliquet neque. Pellentesque vel metus ac tellus aliquam rhoncus elementum et lectus. Pellentesque suscipit enim viverra, egestas nisi in, vehicula justo. Nulla mollis ex sit amet iaculis varius. 
  </p>

  Notes

  • Use the attribute: data-scheme="footnote".