Sizing

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>