Prose content and global styles kitchen sink

We start with a paragraph of text that features various HTML tags, used in flow content. Account for emphasis, strong and small text. Sometimes it is useful to mark some text. Don’t forget to account for abbreviations too, using the abbr (<abbr>) element. Lastly you can define deleted text which often gets replaced with inserted text.

There are some elements with similar styling but different meaning, like the bring attention to element, the idiomatic Text element, the unarticulated annotation element and the strikethrough element.

The Cure will be celebrating their 40th anniversary on July 7 in London's Hyde Park. The concert starts at 20:00 and you'll be able to enjoy the band for at least 2h 30m.

A validator is a program that checks for syntax errors in code or documents, this is a example for the definition element.

If you are referencing keyboard keys, make sure you use the <kbd> element like this: shift. Like we have already in these paragraphs, if you are referencing code, use the <code> element. Don’t forget the <samp> element either. An example for that element is this: Press F1 to continue.

Use the <var> element to reference a variable like this: The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.

You can use a single <kbd> for a single keystroke (like, "press esc to exit full screen"), but if you have a shortcut that involves multiple keys, you can nest them as well, something like <kbd><kbd>cmd</kbd> + <kbd>c</kbd></kbd>, which you can have output like this: like command + c.

If you want an inline quote, use the <q> element quoted text. Lastly don’t forget the subscript (<sub>) (H₂O) and superscript (<sup>) (E = MC²), and of course, link elements.

Blockquote styles are the context for this heading level 2 which is long for testing leading and balance

Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

Make sure you only use a cite if the quote source can be linked to.

Just a quick paragraph to follow the horizontal rule. A bit of Lipsum? Sure thing: Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Details and summary

Tables

Sometimes, a table has column headers

Description List

Just a quick paragraph to introduce heading level 3 too.

Description lists are under-used, but extremely useful

Definition List Title

Definition list division.

Kitchen Sink

Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.

aside

Defines content aside from the page content

blockquote

Defines a section that is quoted from another source

Sometimes description lists have multiple details

This term introduces two details

This is the first one

This is the second one, which is a bit longer

Lists

A simple undordered list

• List item one
• List item two
• List item three, which is a longer item to make sure our marker styles work well for mult-line list items
• List item four

Moving on to a nested undordered list

• Unordered List item one
  • Nested list item
    • Level 3, item one
    • Level 3, item two
    • Level 3, item three
    • Level 3, item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

Order, numbered lists are next

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

A mix of both

• Unordered List item one
  1. Nested ordered list item
     • Level 3, item one
     • Level 3, item two
     • Level 3, item three
     • Level 3, item four
  2. List item two
  3. List item three
  4. List item four
• List item two
• List item three
• List item four

Preformatted Text

  pre {
    display: block;
    padding: 7px;
    background-color: #F5F5F5;
    border: 1px solid #E1E1E8;
    border-radius: 3px;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: Menlo, Monaco;
    line-height: 160%;
  }

pre {
	display: block;
	padding: 7px;
	background-color: #F5F5F5;
	border: 1px solid #E1E1E8;
	border-radius: 3px;
	white-space: pre-wrap;
	word-break: break-all;
	font-family: Menlo, Monaco;
	line-height: 160%;
}

Forms

Where are buttons? Good question. Not here because we don’t tend to style up default buttons and instead opt to treat them as components with a .btn class.

Images, figures, pictures and videos

Under no circumstances should you have an image without an alt attribute. At a minimum, it should be an empty value like this one. That should only be used for purely decorative images though.

An image in a figure with a caption

A picture element

A video element

An SVG with an image role and alternative text

Headings

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox

h4 Five or six big jet planes zoomed quickly by the new tower.

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.

h6 Pack my box with five dozen liquor jugs.

Heading Group

Contact Address