Nothing to see here. Move along now.
Arial is the one font to rule them all.
Arial is the one font to rule them all.
To use the font styles/sizes found here, add the class .nm-cx-theme to the container of your body or section.
As of UITK version 1.14.0, only one font is to be used site-wide as per the Design department. Guardian Sans is the one font to rule them all.
As of UITK version 1.17.0, only 3 font weights (plus 1 for print) are to be used site-wide as per the Design department. Guardian Sans Light should be used as the default font weight for all text.
font-weight
Normal
Italics
200400500 (Bold for Web)800 (Bold for Print)
As of UITK version 1.13.0, only one font is to be used site-wide as per the Design department. Guardian Sans is the one font to rule them all.
font-weight
Normal
Italics
100200400 or normal500700800900Wrap <b></b> or <strong></strong> around type to make it bold.
Use <i></i> or <em></em> to
italicize your words.
<p>This is <strong>bold</strong> and this is <em>italicized</em>.</p>
This is bold and this is italicized.
Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.
<p>Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.</p>
Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.
Some designs may require body type to be 20px instead of the default (14px for PX and 16px for CX). A .paragraph-large class can be added to the <p> to make all type on the page default to 20px;
<p class="paragraph-large">Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.</p>
Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.
Included are styles for all of the header elements that are balanced and based on a modular scale.
| Header | Default | Medium and up |
<h1> |
30px | 40px |
<h2> |
24px | 32px |
<h3> |
20px | 28px |
<h4> |
16px | 16px |
<h5> |
14px | 14px |
<h6> |
12px | 12px |
<!-- Header styles -->
<h1>This is an extra large <span class="show-for-medium-up show-for-nm-cx">40px Light</span><span class="show-for-small-only show-for-nm-cx">24px Light</span> header</h1>
<h2>This is a large <span class="show-for-medium-up show-for-nm-cx">32px Light</span><span class="show-for-small-only show-for-nm-cx">20px Light</span> header</h2>
<h3>This is a medium <span class="show-for-medium-up show-for-nm-cx">28px Light</span><span class="show-for-small-only show-for-nm-cx">18px Light</span> header</h3>
<h4>This is a moderate <span class="show-for-nm-cx">16px Normal</span> header</h4>
<h5>This is a small <span class="show-for-nm-cx">14px Light</span> header</h5>
<h6>This is a tiny <span class="show-for-nm-cx">12px Light</span> header</h6>
A .landing-header class is available for the blue headers commonly found on the NM landing pages. Add the class to the .row containing the header text. Additionally a .header-date class is available for the secondary 'As of' date displayed. While the .landing-header row should be full width, all text in the header should left align with the rest of your text in the grid. The internal .columns element can have a max-width to match the layout of your page on x-large screens.
<div class="row landing-header">
<div class="small-12 columns">
<p class="header-date">As of October 17, 2016</p>
<h1>Your Net Death Benefit is <span class="header-number">$76,015.00</span> with a <br class="show-for-xlarge">Net Cash Value of <span class="header-number">$25,419.92</span></h1>
</div>
</div>
As of October 17, 2016
<!-- Header styles -->
<h1>This is an extra large header.</h1>
<h2>This is a large header.</h2>
<h3>This is a medium header.</h3>
<h4>This is a moderate header.</h4>
<h5>This is a small header.</h5>
<h6>This is a tiny header.</h6>
Lighten up your headers by adding a class of .subheader to any header element.
<!-- Subheader styles -->
<h1 class="subheader">Subheader</h1>
<h2 class="subheader">Subheader</h2>
<h3 class="subheader">Subheader</h3>
<h4 class="subheader">Subheader</h4>
<h5 class="subheader">Subheader</h5>
<h6 class="subheader">Subheader</h6>
By inserting a small element into a header, the toolkit will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.
<h1>Main header <small>Header segment</small></h1>
<h2>Main header <small>Header segment</small></h2>
<h3>Main header <small>Header segment</small></h3>
<h4>Main header <small>Header segment</small></h4>
<h5>Main header <small>Header segment</small></h5>
<h6>Main header <small>Header segment</small></h6>
There are times when the header styles need to be decoupled from the header markup tags. In those rare instances, the following class names can be added to your output in order to provide the header styles without using the header tags.
Important note: Please do not use these classes in place of the header tags, (h1, h2, h3, h4, h5, and h6).
These classes have only been added to provide header tag formatting in the rare instances where semantic markup can't be written.
<div>
<div class="heading-xlarge">Extra large header style</div>
<div class="heading-large">Large header style</div>
<div class="heading-medium">Medium header style</div>
<div class="heading-moderate">Moderate header style</div>
<div class="heading-small">Small header style</div>
<div class="heading-tiny">Tiny header style</div>
</div>
A combination of type styles means you can do almost anything. Listed below are styles for individual type components used in combination with others.
<div class="show-for-nm-cx">
<div class="row padding-vert-large padding-horiz-xlarge">
<div class="medium-4 columns">
<h2>Notifications</h2>
</div>
<div class="medium-4 columns">
<p>Your Annulized Premium of $706.20 is due in 11 days on October 31, 2016</p>
<button class="button btn-cta">Make Payment</button>
</div>
<div class="medium-4 columns">
<p>You have an outstanding load on your account</p>
<button class="tertiary button btn-cta">View Details</button>
</div>
</div>
<div class="row bg-primary">
<div class="columns padding-vert-large padding-horiz-xlarge text-center">
<h3 class="text-white padding-vert-large padding-horiz-xlarge">Assign a savings account to your goal:</h3>
</div>
</div>
<div class="row padding-vert-large padding-horiz-xlarge">
<div class="medium-4 columns">
<h4>The Index Protection Benefit</h4>
<p>The Index Protection Benefit (IPB) can keep a policy's deathe benefit on pace with inflaction by providing yeary, automatic increases in a policy's face amount in years two through ten</p>
</div>
<div class="medium-4 columns end">
<p>123 Whipperwillow Dr</p>
<p>Vacation Home</p>
</div>
</div>
<div class="row padding-vert-large padding-horiz-xlarge">
<div class="columns">
<h5>Pay with out of pocket funds through your <a>Billng Account online</a></h5>
</div>
</div>
<div class="row padding-vert-large padding-horiz-xlarge">
<div class="medium-4 columns">
<h6>Get Estimate</h6>
</div>
<div class="medium-4 columns end">
<h6>Connecting you accounts is safe and secure. Here's why<br> Review our <a>Terms of Use</a></h6>
</div>
</div>
</div>
<div class="show-for-nm-px">
<h1>This is an extra large header.</h1>
<h3 class="subheader">Subheader</h3>
<p>This is a paragraph with a <a href="#">link</a> inside!</p>
<h2>TODO:</h2>
<ol>
<li>Pick up groceries <abbr title="as soon as possible">ASAP</abbr></li>
<li>Work on the <abbr title="Graphical User Interface">GUI</abbr> for my new site!</li>
<li>Clean my room (maybe)</li>
</ol>
<hr>
<blockquote>"This is an example of a blockquote."
<cite>Cited Source</cite>
</blockquote>
<h3>Here's some contact info:</h3>
<ul class="vcard">
<li class="fn">Gaius Baltar</li>
<li class="street-address">123 Colonial Ave.</li>
<li class="locality">Caprica City</li>
<li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
<li class="email"><a href="#">g.baltar@example.com</a></li>
</ul>
</div>
Your Annulized Premium of $706.20 is due in 11 days on October 31, 2016
You have an outstanding load on your account
The Index Protection Benefit (IPB) can keep a policy's deathe benefit on pace with inflaction by providing yeary, automatic increases in a policy's face amount in years two through ten
123 Whipperwillow Dr
Vacation Home
This is a paragraph with a link inside!
"This is an example of a blockquote." Cited Source
A combination of type styles means you can do almost anything. Listed below are styles for individual type components used in combination with others.
<h1>This is an extra large header.</h1>
<h3 class="subheader">Subheader</h3>
<p>This is a paragraph with a <a href="#">link</a> inside!</p>
<h2>TODO:</h2>
<ol>
<li>Pick up groceries <abbr title="as soon as possible">ASAP</abbr></li>
<li>Work on the <abbr title="Graphical User Interface">GUI</abbr> for my new site!</li>
<li>Clean my room (maybe)</li>
</ol>
<hr>
<blockquote>"This is an example of a blockquote."
<cite>Cited Source</cite>
</blockquote>
<h3>Here's some contact info:</h3>
<ul class="vcard">
<li class="fn">Gaius Baltar</li>
<li class="street-address">123 Colonial Ave.</li>
<li class="locality">Caprica City</li>
<li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
<li class="email"><a href="#">g.baltar@example.com</a></li>
</ul>
This is a paragraph with a link inside!
"This is an example of a blockquote." Cited Source
Horizontal rules will give you a horizontal border (or ruler) above your <hr> denoted elements.
<p>This represents a horizontal rule and how it looks when combined underneath another element.</p>
<p>Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.</p>
<hr>
<p>Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.</p>
This represents a horizontal rule and how it looks when combined underneath another element.
Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.
Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.
The code tag can be used when trying to display code snippets.
<p>To display code inline, use the <code><code></code> tag.</p>
To display code inline, use the <code> tag.
Lists are helpful for, well, lists of things. Didn't see that coming did you! There are baked-in styles for a number of different unordered list styles, as well as ordered and definition lists.
<ul class="disc">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ul></li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
The <abbr> tag can be used to provide a description of what an abbreviation (or acronym) stands for.
The <acronym> tag is not supported with HTML5. You may use it with earlier HTML versions, however it is suggested to use <abbr> instead.
Would you mind doing this <abbr title="as soon as possible">ASAP</abbr>?
Blockquotes are used to provide styling around a quoted resource. You may use the <blockquote> tags along with the optional <cite> tags nested
inside the blockquote as shown below.
<blockquote>"This is an example of a blockquote."
<cite>Cited Source</cite>
</blockquote>
"This is an example of a blockquote." Cited Source
We can use the .vcard class to create a card. You may also use classes nested inside for things like full name (.fn) as shown below.
Notice how the <h1> tag is being used, but the styling from the .fn class will take precedence.
<ul class="vcard">
<li class="fn">Gaius Baltar</li>
<li class="street-address">123 Colonial Ave.</li>
<li class="locality">Caprica City</li>
<li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
<li class="email"><a href="#">g.baltar@example.com</a></li>
</ul>
You may also use the .vevent class in order to build a card with a summary included.
<div class="vevent">
<h1 class="fn">Firstname Lastname</h1>
<p class="summary">Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur,
ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.</p>
</div>
Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Typography
The typography in this style-guide is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.