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>
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>
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>
Notes
<p class='note'>Note: this is a note.</p>
<p class='important-note'>Note: this is an important note.</p>
Links
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>
External Links
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>
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>
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>
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>