Cart Checkout
Search for products and information:
Advanced Search
  • Compare Products

Show Sections Hide Sections

Typography

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, quos? Quos nostrum consectetur quidem ab quaerat libero perferendis voluptatem, alias sint possimus odio. Ratione explicabo optio sed architecto itaque saepe beatae consequatur. In porro voluptates quaerat aut officiis ipsa optio at atque, assumenda qui ipsum quis provident autem reiciendis debitis?</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, quos? Quos nostrum consectetur quidem ab quaerat libero perferendis voluptatem, alias sint possimus odio. Ratione explicabo optio sed architecto itaque saepe beatae consequatur. In porro voluptates quaerat aut officiis ipsa optio at atque, assumenda qui ipsum quis provident autem reiciendis debitis?
Intro Paragraphs
<p class='intro'>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus voluptas eius libero nam obcaecati voluptatum dolores rerum! Commodi impedit pariatur dolore rem officiis. Vel, illo dolores saepe totam perferendis repellendus.</p>

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus voluptas eius libero nam obcaecati voluptatum dolores rerum! Commodi impedit pariatur dolore rem officiis. Vel, illo dolores saepe totam perferendis repellendus.
Notes
<p class='note'>Note: this is a note.</p>

Note: this is a note.

 
<p class='important-note'>Note: this is an important note.</p>

Note: this is an important note.

To create a link use an <a> element.

All internal links should be relative links, relative from the origin, not the current document. For example to link to this sytle guide page you should use:

<a href="/style-guide">Read the style guides</a>

All external links should open in a new tab, to do this give each <a> element a target='_blank' attribute.

<a href='http://google.com' target='_blank'>Google.com</a>
Google.com
Email and PDF Links
<a href="/my-pdf.pdf">A link to a PDF file</a>
<br />
<a href="mailto:fake-email@americanmeadows.com">fake-email@americanmeadows.com</a>
A link to a PDF file
fake-email@americanmeadows.com

Text Alignment

To align text use the align attribute. The allowed values are left, center, right and justify.

<p align="left">left aligned text</p>
<p align="center">center aligned text</p>
<p align="right">right aligned text</p>
<p align="justify">This text is justified, that means that the space between the words are adjusted to force the text to span completely from the left to the right edge on all lines except the last line. This was popularized by newpapers and magazines in the pre-internet era. Lorem ipsum dolor sit amet, mutat philosophia cu has, vix soluta nemore referrentur at. Eam ne fugit velit facilisis. Aeterno invenire erroribus ei pro. Omnes diceret perfecto vel in, cu adhuc ignota urbanitas ius, tollit eruditi neglegentur at sea.</p>

left aligned text

center aligned text

right aligned text

This text is justified, that means that the space between the words are adjusted to force the text to span completely from the left to the right edge on all lines except the last line. This was popularized by newpapers and magazines in the pre-internet era. Lorem ipsum dolor sit amet, mutat philosophia cu has, vix soluta nemore referrentur at. Eam ne fugit velit facilisis. Aeterno invenire erroribus ei pro. Omnes diceret perfecto vel in, cu adhuc ignota urbanitas ius, tollit eruditi neglegentur at sea.

Tooltips

To create a tooltip that appears when you hover over some text give it a data-tooltip attribute whose value is the tooltip's content.

<p data-tooltip="I am a tooltip">Hover over me</p>

Hover over me