Typography
Use Works Sans font as the primary typeface throughout the site. Additional type styles are available as specifically noted below. All are open source fonts available on Google Web Fonts.
Use Works Sans font as the primary typeface throughout the site. Additional type styles are available as specifically noted below. All are open source fonts available on Google Web Fonts.
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
Small Caps
Small Caps is used throughout the site when referencing either Viva Health or Viva Medicare.
<span class="small-caps">Viva Health</span>
<h1 class="font-brand">Brand Heading</h1>
Paragraph
Standard paragraph text looks like this and is used throughout the site as the default text style. Any body copy or standard text should use this text style.
<p>Standard paragraph text</p>
Small Paragraph
Small paragraph text looks like this and is used for captions.
<small>Small text</small>
or
<p class="small">Small paragraph text</p>
UL/OL
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Brand paragraph text looks like this and is used for quotes and blockquotes.
<blockquote class="font-brand">Brand paragraph text</blockquote>
or
<div class="quote font-brand">Brand paragraph text</div>
<h4 class="card-headline">card headline</h4>
or
<div class="card">
<h4>card headline</h4>
</div>
Disclaimer
Standard Disclaimer text looks like this and is used XXXXX
<p class="disclaimer">Standard Disclaimer text</p>
Disclaimer Paragraph (Bold) also has an emphasis style that looks like this
<p class="disclaimer text-semibold">Disclaimer Paragraph (Bold)</p>
Small Disclaimer
Small Disclaimer text looks like this and is used XXXXX
<small class="disclaimer">Small Disclaimer text</small>
Disclaimer Paragraph (Bold) also has an emphasis style that looks like this
<p class="disclaimer small text-bold">Small Disclaimer (Bold)</p>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
Small Caps
Small Caps is used throughout the site when referencing either Viva Health or Viva Medicare.
<span class="small-caps">Viva Health</span>
<h1 class="font-brand">Brand Heading</h1>
Paragraph
Standard paragraph text looks like this and is used throughout the site as the default text style. Any body copy or standard text should use this text style.
<p>Standard paragraph text</p>
Small Paragraph
Small paragraph text looks like this and is used for captions.
<small>Small text</small>
or
<p class="small">Small paragraph text</p>
UL/OL
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Brand Text
Brand paragraph text looks like this and is used for quotes and blockquotes.
<blockquote class="font-brand">Brand paragraph text</blockquote>
or
<div class="quote font-brand">Brand paragraph text</div>
<h4 class="card-headline">card headline</h4>
or
<div class="card">
<h4>card headline</h4>
</div>
Disclaimer
Standard Disclaimer text looks like this and is used XXXXX
<p class="disclaimer">Standard Disclaimer text</p>
Disclaimer Paragraph (Bold) also has an emphasis style that looks like this
<p class="disclaimer text-semibold">Disclaimer Paragraph (Bold)</p>
Small Disclaimer
Small Disclaimer text looks like this and is used XXXXX
<small class="disclaimer">Small Disclaimer text</small>
Disclaimer Paragraph (Bold) also has an emphasis style that looks like this
<p class="disclaimer small text-bold">Small Disclaimer (Bold)</p>
<h1>Header 2</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
Small Caps
Small Caps is used throughout the site when referencing either Viva Health or Viva Medicare.
<span class="small-caps">Viva Health</span>
<h1 class="font-brand">Brand Heading</h1>
Paragraph
Standard paragraph text looks like this and is used throughout the site as the default text style. Any body copy or standard text should use this text style.
<p>Standard paragraph text</p>
Small Paragraph
Small paragraph text looks like this and is used for captions.
<small>Small text</small>
or
<p class="small">Small paragraph text</p>
UL/OL
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Brand Text
Brand paragraph text looks like this and is used for quotes and blockquotes.
<blockquote class="font-brand">Brand paragraph text</blockquote>
or
<div class="quote font-brand">Brand paragraph text</div>
<h4 class="card-headline">card headline</h4>
or
<div class="card">
<h4>card headline</h4>
</div>
Disclaimer
Standard Disclaimer text looks like this and is used XXXXX
<p class="disclaimer">Standard Disclaimer text</p>
Disclaimer Paragraph (Bold) also has an emphasis style that looks like this
<p class="disclaimer text-semibold">Disclaimer Paragraph (Bold)</p>
Small Disclaimer
Small Disclaimer text looks like this and is used XXXXX
<small class="disclaimer">Small Disclaimer text</small>
Disclaimer Paragraph (Bold) also has an emphasis style that looks like this
<p class="disclaimer small text-bold">Small Disclaimer (Bold)</p>