A combination of type styles means you can do almost anything. Listed below are styles for individual type components used in combination with others.
This is a paragraph with a link inside!
"This is an example of a blockquote." Cited Source
<h1>This is a very 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>
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.
Included are styles for all of the header elements that are balanced and based on a modular scale.
<!-- Header styles -->
<h1>This is a very 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>
Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.
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.</p>
Wrap <strong> around type to make it bold! You can also use <em> to
italicize your words.
This is bold and this is italicized.
<p>This is <strong>bold</strong> and this is <em>italicized</em>.</p>
Links are very standard.
This is a link.
<p>This is a <a href="#">link</a>.</p>
Horizontal rules will give you a horizontal border (or ruler) above your <hr> denoted elements.
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.
<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>
The code tag can be used when trying to display code snippets.
To display code inline, use the <code> tag.
<p>To display code inline, use the <code><code></code> tag.</p>
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>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.
"This is an example of a blockquote." Cited Source
<blockquote>"This is an example of a blockquote."
<cite>Cited Source</cite>
</blockquote>
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.
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.
<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>
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.
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.
<div class="bg-off-black padding-medium ghost-children">
<h1>This is a very 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>
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.