Nothing to see here. Move along now.
Arial is the one font to rule them all.
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.
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.
Included are styles for all of the header elements that are balanced and based on a modular scale.
<!-- 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.
<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.
Type components may also be used on dark backgrounds using the .ghost and .ghost-children classes. For more information
on ghosting, see the ghosting section.
<div class="bg-off-black padding-medium ghost-children">
<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>
<p>To display code inline, use the <code><code></code> tag.</p>
</div>
This is a paragraph with a link inside!
"This is an example of a blockquote." Cited Source
To display code inline, use the <code> tag.
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.