Sizing

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to override the default size of any text (make text large or small).

Design and coding

Basic use

Height options

Use to override the global default font-size of 16px, with a line-height of 1.428.

Appearance
  • Size H1
  • Size H2
  • Size lead
  • Size H3
  • Size H4
  • Size H5
  • (Default size)
  • Size H6
  • Size small (CSS)
  • Size small (element)
Correct use

Compliance point(s):

  • Use appropriate semantic markup
    • Changes in text size can convey information
  • Use when you need to add or reduce impact to text that isn't an actual heading
  • Use the <small> element to define small text, for example side-comments, disclaimers and "fine" print, including copyright and legal text
  • Use the .small CSS to style text and reduce it in size and impact
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use in place of actual headers
  • Do not use .small or <small> simply to squeeze a lot of text into a small area
    • Consider breaking the text into smaller blocks
Code
<ul>
  <li class="h1 mrgn-tp-0 mrgn-bttm-md">Size H1</li>
  <li class="h2 mrgn-tp-0">Size H2</li>
  <li class="lead">Size lead</li>
  <li class="h3">Size H3</li>
  <li class="h4">Size H4</li>
  <li class="h5">Size H5</li>
  <li>Default size</li>
  <li class="h6">Size H6</li>
  <li class="small">Size small CSS</li>
  <li><small>Size small element</small></li>
</ul>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: