Source: styleguide/styleguide.less, line 290
Source: styleguide/styleguide.less, line 294
Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Markup
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
Source: text/fonts.less, line 122
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup
  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
Source: text/fonts.less, line 214

3.1.3 #permalink Font families, faces, weights.

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Note that not all fonts are available in all weights and faces. TODO should we add missing font weights and just degrade to the existing ones?

Example
text_4n
text_7n
text_8n
text_4i
text_7i
text_title text_3n
text_title text_4n
text_title text_7n
Markup
 <div class="grid-12 grid-parent">
  <div class="grid-4">
  <span class="text_4n">text_4n</span><br/>
  <span class="text_7n">text_7n</span><br/>
  <span class="text_8n">text_8n</span><br/>
  </div>
  <div class="grid-4">
  <span class="text_4i">text_4i</span><br/>
  <span class="text_7i">text_7i</span><br/>
  </div>
  <div class="grid-4">
  <span class="text_title text_3n">text_title text_3n</span><br/>
  <span class="text_title text_4n">text_title text_4n</span><br/>
  <span class="text_title text_7n">text_title text_7n</span><br/>
  </div>
 </div>
Source: text/fonts.less, line 67
Example
text_fontSizeSmaller
text_fontSizeSmall
text_fontSizeBase
text_fontSizeLarge
text_fontSizeLarger
text_fontSizeLargest
text_fontSizeJumbo
Markup
  <span class="text_fontSizeSmaller">text_fontSizeSmaller</span><br/>
  <span class="text_fontSizeSmall">text_fontSizeSmall</span><br/>
  <span class="text_fontSizeBase">text_fontSizeBase</span><br/>
  <span class="text_fontSizeLarge">text_fontSizeLarge</span><br/>
  <span class="text_fontSizeLarger">text_fontSizeLarger</span><br/>
  <span class="text_fontSizeLargest">text_fontSizeLargest</span><br/>
  <span class="text_fontSizeJumbo">text_fontSizeJumbo</span><br/>
Source: text/fonts.less, line 4
Example
text_letterSpacingNormal
text_letterSpacingLoose
text_letterSpacingLooser
text_letterSpacingLoosest
Markup
  <span class="text_letterSpacingNormal">text_letterSpacingNormal</span><br/>
  <span class="text_letterSpacingLoose">text_letterSpacingLoose</span><br/>
  <span class="text_letterSpacingLooser">text_letterSpacingLooser</span><br/>
  <span class="text_letterSpacingLoosest">text_letterSpacingLoosest</span>
Source: text/fonts.less, line 28
Example
tightest
line
height
tight
line
height
natural
line
height
base
line
height
loose
line
height
looser
line
height
loosest
line
height
Markup
 <div class="grid-12 grid-parent">
  <div class="grid-1 text_lineHeightTightest">tightest<br/>line<br/>height</div>
  <div class="grid-1 text_lineHeightTight">tight<br/>line<br/>height</div>
  <div class="grid-2 text_lineHeightNatural">natural<br/>line<br/>height</div>
  <div class="grid-2 text_lineHeightBase">base<br/>line<br/>height</div>
  <div class="grid-2 text_lineHeightLoose">loose<br/>line<br/>height</div>
  <div class="grid-2 text_lineHeightLooser">looser<br/>line<br/>height</div>
  <div class="grid-2 text_lineHeightLoosest">loosest<br/>line<br/>height</div>
 </div>
Source: text/fonts.less, line 43
Example
a text label
Markup
  <span class="text_allCaps">a text label</span>
Source: text/fonts.less, line 232

3.2 #permalink Links

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Links are vastly simpler as of 3/2016. By default they're blue and not underlined, and orange and underlined on hover. link_subtle links don't get underlined on hover. To have it keep its color on hover, define a color for its parent and apply col_inherit to the link/child. Never use col_inherit and link_subtle together, or the link will have no hover state. There are only three additional types of links: link_block, link_block2, and link_stroke.

Markup
<div class="grid-parent layout_centerVertical">
  <div class="grid-3">
    <a href="/" class="[modifier class]">default link</a><br/>
    <a href="/" class="link_subtle [modifier class]">subtle link</a><br/>
    <span class="col_ggPrimary3Text"><a href="/" class="col_inherit [modifier class]">always green link</a></span> <br/>
    <span class="col_ggSecondary3Text"><a href="/" class="col_inherit link_subtle [modifier class]">don't ever do this</a></span> <br/>
  </div>
  <div class="grid-3 col_whiteText box_padded1 layout_center"><a class="grid-12 col_ggPrimary5 col_inherit link_block box_padded3 [modifier class]">block link</a></div>
  <div class="grid-3 col_whiteText box_padded1 layout_center"><a class="grid-12 col_ggPrimary5 col_inherit link_block2 box_padded3 [modifier class]">block link 2</a></div>
  <a href="/" class="grid-3 box_paddedHalf link_stroke [modifier class]">
    <div class="col_ggPrimary1Lighter box_padded4 col_defaultText">
      stroke link
    </div>
  </a>
</div>
Source: text/links.less, line 6

3.2.1 #permalink Linkify

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This is a bit of css magic to make an entire div clickable. Compare these two blocks, where the entire block is clickable on the left and only the text is clickable on the right. Note that the parent div must be relative positioned.

Markup
 <div class="grid-parent box_padded2">
  <div class="grid-3 grid-parent col_ggPrimary1Dark layout_center layout_centerVertical layout_rel box_verticalPadded2">
     <a href="#" class="col_whiteText link_subtle"><span class="link_linkify"></span>click anywhere</a>
  </div>
  &nbsp;
  <div class="grid-3 grid-parent col_ggPrimary1Dark layout_center layout_centerVertical layout_rel box_verticalPadded2">
     <a href="#" class="col_whiteText link_subtle">click this text</a>
  </div>
 </div>
Source: text/links.less, line 82
Source: styleguide/styleguide.less, line 298
Example
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • sed do eiusmod tempor incididunt
    • ut labore et dolore magna aliqua
  • Ut enim ad minim veniam
Markup
  <ul>
     <li>Lorem ipsum dolor sit amet</li>
	  <li>Consectetur adipiscing elit</li>
	  <ul>
         <li>sed do eiusmod tempor incididunt</li>
         <li>ut labore et dolore magna aliqua</li>
     </ul>
     <li>Ut enim ad minim veniam</li>
  </ul>
Source: text/lists.less, line 2
Example
  • an item
  • another item
  • yet another item
  • an item
  • another item
  • yet another item
Markup
  <ul>
     <li>an item</li>
     <li>another item</li>
     <li>yet another item</li>
  </ul>
  <ul class="list_noDecorate">
     <li>an item</li>
     <li>another item</li>
     <li>yet another item</li>
  </ul>
Source: text/lists.less, line 28