---
layout: app/app-layout
pagename: typography
---
<div class="title-block">
	<h3 class="title">
		Typography
	</h3>
</div>

<section class="section">
	<div class="row sameheight-container">
		<div class="col-md-4">
			<div class="card sameheight-item">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Headings
						</h3>
					</div>
					<section class="section">
						<h1>Heading 1
                           <small>Sub-heading</small>
                        </h1>
                        <h2>Heading 2
                           <small>Sub-heading</small>
                        </h2>
                        <h3>Heading 3
                           <small>Sub-heading</small>
                        </h3>
                        <h4>Heading 4
                           <small>Sub-heading</small>
                        </h4>
                        <h5>Heading 5
                           <small>Sub-heading</small>
                        </h5>
                        <h6>Heading 6
                           <small>Sub-heading</small>
                        </h6>
					</section>
				</div>
			</div>
		</div>

		<div class="col-md-4">
			<div class="card sameheight-item">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Paragraphs
						</h3>
					</div>
					<section class="section">
						<p class="lead">This is an example of lead body copy.</p>
						<p>This is an example of standard paragraph text. This is an example of <a href="javascript:void(0);">link anchor text</a> within body copy.</p>
						<p>
						<small>This is an example of small, fine print text.</small>
						</p>
						<p>
						<strong>This is an example of strong, bold text.</strong>
						</p>
						<p>
						<em>This is an example of emphasized, italic text.</em>
						</p>
					</section>
				</div>
			</div>
		</div>

		<div class="col-md-4">
			<div class="card sameheight-item">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Emphasis Classes
						</h3>
					</div>
					<section class="section">
						<p class="text-muted">This is an example of muted text.</p>
                        <p class="text-primary">This is an example of primary text.</p>
                        <p class="text-success">This is an example of success text.</p>
                        <p class="text-info">This is an example of info text.</p>
                        <p class="text-warning">This is an example of warning text.</p>
                        <p class="text-danger">This is an example of danger text.</p>
					</section>
				</div>
			</div>
		</div>
	</div>
</section>


<section class="section">
	<div class="row sameheight-container">
		<div class="col-md-4">
			<div class="card sameheight-item">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Abbreviations
						</h3>
					</div>
					<section class="section">
						<p>The abbreviation of the word attribute is
			               <abbr title="attribute">attr</abbr>.</p>
			            <p>
			               <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>is an abbreviation for a programming language.</p>
			            <br>
			            <h4>Addresses</h4>
			            <address>
			               <strong>Twitter, Inc.</strong>
			               <br>795 Folsom Ave, Suite 600
			               <br>San Francisco, CA 94107
			               <br>
			               <abbr title="Phone">P:</abbr>(123) 456-7890</address>
			            <address>
			               <strong>Full Name</strong>
			               <br><a href="mailto:#">first.last@example.com</a>
			            </address>
					</section>
				</div>
			</div>
		</div>

		<div class="col-md-4">
			<div class="card sameheight-item">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Blockquotes
						</h3>
					</div>
					<section class="section">
						<h4>Default Blockquote</h4>
                        <blockquote>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </blockquote>
                        <h4>Blockquote with Citation</h4>
                        <blockquote>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                           <small>Someone famous in
                              <cite title="Source Title">Source Title</cite>
                           </small>
                        </blockquote>
                        <h4>Right Aligned Blockquote</h4>
                        <blockquote class="pull-right">
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </blockquote>
					</section>
				</div>
			</div>
		</div>

		<div class="col-md-4">
			<div class="card sameheight-item">
				<div class="card-block">
					<div class="card-title-block">
						<h3 class="title">
							Lists
						</h3>
					</div>
					<section class="section">
						<h4>Unordered List</h4>
                        <ul>
                           <li>List Item</li>
                           <li>List Item</li>
                           <li>
                              <ul>
                                 <li>List Item</li>
                                 <li>List Item</li>
                                 <li>List Item</li>
                              </ul>
                           </li>
                           <li>List Item</li>
                        </ul>
                        <h4>Ordered List</h4>
                        <ol>
                           <li>List Item</li>
                           <li>List Item</li>
                           <li>List Item</li>
                        </ol>
					</section>
				</div>
			</div>
		</div>
	</div>
</section>