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. Don’t forget to account for abbreviations too, using the abbr (<abbr>) element. Lastly you can define deleted text inserted text.

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.

If you want an inline quote, use the <q> element quoted text. Lastly don’t forget the subscript (<sub>) (H2O) and superscript (<sup>) (E = MC2), 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.
Aldous Huxley, Brave New World

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

Toggle the details element

Previously hidden content until the details element is in its open state.

Toggle the details element

Previously hidden content until the details element is in its open state.

Tables

A nice caption for this table
Person Number Third Column
Someone Lastname 900 Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name 1200 Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person 1500 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One 2800 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Sometimes, a table has column headers

A nice caption for this table
Person Number Third Column
This column’s heading Someone Lastname 900 Nullam quis risus eget urna mollis ornare vel eu leo.
Another column heading Person Name 1200 Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Code in tables should have more paired back styles Another Person 1500 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last column header Last One 2800 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Description lists time

Just a quick paragraph to introduce heading level 3 too.

Description lists are under-used, but extremely useful

A description list term
A description list detail
Another term
A slightly longer details element to work with.

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, glorious lists

Lists in various forms.

A simple undordered list

Moving on to a nested undordered list

Order, numbered lists are next

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

Moving on to a nested undordered list

  1. Ordered List item one
    1. Nested list item
      1. Level 3, item one
      2. Level 3, item two
      3. Level 3, item three
      4. Level 3, 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

Preformatted text / blocks of code styles follow on next

{`.context-alert {
        position: absolute;
        inset: auto 0 calc(100% + 0.5em) 0;
        padding: 0.25em;
        background: var(--color-primary);
        color: var(--color-light);
        font-weight: var(--font-bold);
        text-align: center;
        transition: opacity var(--transition-fade) 200ms,
          transform var(--transition-bounce-fast) 200ms;
      }`}

Forms

I am a legend element for radio inputs
I am also a legend but this time for checkboxes

Web Awesome input components

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 .button class.

Just kidding! Here are some buttons:

A button component A plain button component

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 Tokyo street in the early evening dusk. The shot is from under a steel bridge where there is a store, lit up, which in turn, lights up the surrounding area.
Tokyo, Japan, looking stunning in the early evening. By ayumi kubo

A picture element

An above shot of some very green leaves

A video element

An SVG with an image role and alternative text

All of the headings

We tend to only specifically style up headings up to level 4 in terms of leading and balance because if you’re getting into 5 and 6, you probably want to be simplifying your content. We’ll add them here though to double check they look OK.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis.
Sed posuere consectetur est at lobortis.