open-index/open-npm huggingface dataset:
npm package: @moodxd/base-typography
Description: MoO Base Typography
Author: Mutual of Omaha
Latest version: 1.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# MoO Base Typography

## Overview
```html
<p>This is Mutual of Omaha's chosen Typography set.<br/>
We use <strong>Source Pro Sans</strong> as our headings.<br/>
All font sizes use <code>rem</code> with a <code>px</code> fallback.<br/>
We use <strong>Source Pro Sans</strong> as our body Copy with the base font size of <strong>2.2rem</strong> and the <code>line-height</code> of <strong>3.2rem</strong>.</p>
```
___

## Headings
```html
<h1>H1: Header <strong>One</strong> and Only Brand Blue</h1>
<h2>H2: Starting Dark Gray Now with Heading <strong>Two</strong></h2>
<h3>H3: Lucky Number <strong>Three</strong> is Going, Going, Gone</h3>
<h4>H4: July <strong>Four</strong> Twenty Fourteen is Coming Soon</h4><br/>
<h5>H5: Alive Going <strong>Five</strong> Headers that are all Four Pixels Changing</h5><br/>
<h6>H6: Small and Mighty <strong>Six</strong> May be the Only Bolder Header at Four Hundred Weight</h6>
```
___

## Weights
```html
<p class="u-fontWeight300">This is the font weight of 300</p>
<p class="u-fontWeight400">This is the font weight of 400</p>
<p class="u-fontWeight600">This is the font weight of 600</p>
<p class="u-fontWeight700">This is the font weight of 700</p>
```
___

## Links
```html
<p>This is a <a>link</a> in some text</p>
```
___

## Strong, Italic, Underlined, and Small
```html
<p>This is <strong>bold</strong> text</p>
<p>This is <u>underlined</u> text</p>
<p>This is <em>italicized</em> text</p>
<p>This text is <small>small</small></p>
```
*`u-fontBold`, `u-fontUnderline`, `u-fontItalic`, and 'u-fontSmall' also available.*
___

## Lists
```html
<ul>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ul>
```
npm package: @moodxd/theme-core
Description: Core Theme
Author: Mutual of Omaha
Latest version: 1.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# MoO Core Theme


## Standard Breakpoints
sm-viewport     (min-width:698px);
max-sm-viewport (max-width:698px);
md-viewport     (min-width:857px);
max-md-viewport (max-width:857px);
lg-viewport     (min-width:900px);
max-lg-viewport (max-width:900px);


## Color Palette
```html
<div class="u-cf">
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8 u-md-size1of8">
      <div class="u-bgGrayDarkest u-fontWhite u-pV8">
      grayDarkest
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayDarker u-fontWhite">
      grayDarker
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayDark u-fontWhite">
      grayDark
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGray u-fontWhite">
      gray
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayLight u-fontWhite">
      grayLight
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayLighter">
      grayLighter
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGrayLightest">
      grayLightest
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgBlueDark u-fontWhite">
      blueDark
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgBlue u-fontWhite">
      blue
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgTeal u-fontWhite">
      teal
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGreen u-fontWhite">
      green
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgGreenLight">
      greenLight
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8">
      <div class="u-pV8 u-bgYellow u-fontWhite">
      yellow
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8 u-md-before1of8">
      <div class="u-pV8 u-bgYellowLighter">
      yellowLighter
      </div>
    </div>
  </div>
  <div class="Grid Grid--withoutGutter u-cf">
    <div class="Grid-cell u-md-size1of8 u-md-before3of8">
      <div class="u-pV8 u-bgRed u-fontWhite">
      red
      </div>
    </div>
    <div class="Grid-cell u-md-size1of8 u-md-before1of8">
      <div class="u-pV8 u-bgRedLighter">
      redLighter
      </div>
    </div>
  </div>
</div>