Author VCard
Jane Doe, PhDPresident, VP of Private Affairs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<section class="vCard"><p><img class="width25 floatLeft" src="http://lorempixel.com/200/300/people/" alt="" /></p><h4>Jane Doe<small>President, VP of Private Affairs</small></h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p><a href="" title="" target="_blank" rel="noopener noreferrer">www.websiteaddress.com</a></p></section>
Typography
Headers
h1. This is a very large header.
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
h1. This is a very large header.With a Subheader
h2. This is a large header.With a Subheader
h3. This is a medium header.With a Subheader
h4. This is a moderate header.With a Subheader
h5. This is a small header.With a Subheader
h6. This is a tiny header.With a Subheader
<h1>h1. This is a very large header.</h1><h2>h2. This is a large header.</h2><h3>h3. This is a medium header.</h3><h4>h4. This is a moderate header.</h4><h5>h5. This is a small header.</h5><h6>h6. This is a tiny header.</h6>
<h1>h1. This is a very large header.<small>With a Subheader</small></h1><h2>h2. This is a large header.<small>With a Subheader</small></h2><h3>h3. This is a medium header.<small>With a Subheader</small></h3><h4>h4. This is a moderate header.<small>With a Subheader</small></h4><h5>h5. This is a small header.<small>With a Subheader</small></h5><h6>h6. This is a tiny header.<small>With a Subheader</small></h6>
Paragraphs
This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. You have several options for highlighting text. The <strong> tag makes text bolder. The <em> tag makes text italicized. You also have available the .underline class to underline your text as well as the .uppercase class to make your text uppercase.
<p>You have several options for highlighting text. The strong tag <strong>makes text bolder</strong>. The em tag <em>makes text italicized</em>. You also have available the .underline class to <span class="underline">underline your text</span> as well as the .uppercase class to <span class="uppercase">make your text uppercase.</span></p>
Links
The standard link colors are preset to the Primary and Secondary colors. This is an example of a link. If you’d like your link to have an arrow after it, add the class .more to it, like this: Learn More
<a href="">This is an example of a link</a>.<a href="" class="more">Learn More</a>
Dividers
Use dividers to define breaks between paragraphs or sections.
<hr />
Lists – Unordered, Ordered & Description
Use an unordered list to list things if the order of the items doesn’t matter. Use an ordered list when creating a list where the order of the items is important, like ranking something from best to worst. Use a description list to define or describe a term.
Unordered List
- Costs significantly less!
- You can leave your kids alone in a room with this product and they won’t get hurt (not a guarantee)
- It’s much easier to use!
<ul><li>Costs significantly less!</li><li>You can leave your kids alone in a room with this product and they won’t get hurt (not a guarantee)</li><li>It’s much easier to use!</li></ul>
Ordered List
- Mix dry ingredients thoroughly.
- Gently fold in wet ingredients until moistened through.
- Bake for one hour at 300 degrees.
<ol><li>Mix dry ingredients thoroughly</li><li>Gently fold in wet ingredients until moistened through.</li><li>Bake for one hour at 300 degrees.</li></ol>
Description List
- HTML
- Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
- CSS
- Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language.
<dl><dt>HTML</dt><dd>Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.</dd><dt>CSS</dt><dd>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language.</dd></dl>
Blockquotes
You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, ‘I lived through this horror. I can take the next thing that comes along.’
Eleanor Roosevelt
<blockquote><p>You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, ‘I lived through this horror. I can take the next thing that comes along.’</p><cite>Eleanor Roosevelt</cite></blockquote>
Text Alignment
Left Aligned Text
This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="textLeft">This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Right Aligned Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.
<p class="textRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>
Center Aligned Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.
<p class="textCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>
Justify Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.
<p class="textJustify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>
Buttons
A basic button can be created using the .btn class. If you’d like your button to stand out a little more, you may also add the class .large.
Standard Button
<a class="btn">Press Me</a>
Large Button
<a class="btn large">Press Me</a>
Images
There are several classes available to both size and position your images. The available widths are .width20, .width25, .width33, .width50, .width75 and .width100.
Image Floated Left 20% Width
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum.
<p><img src="http://lorempixel.com/400/250/animals/" class="floatLeft width25">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
Image Floated Right 50% Width
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi.
<p><img src="http://lorempixel.com/400/250/animals/" class="floatRight width50">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
Image Centered 100% Width
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<p><img src="http://lorempixel.com/400/250/animals/" class="block positionCenter width100"></p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
Responsive Videos
To make an embedded video responsive, add the class .flex-container to the containing tag. To make your responsive video styled, add the class .styled to the containing tag.
<p class="flex-container styled"><iframe src=”https://www.youtube.com/embed/NpEaa2P7qZI” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>