The following represents the default state of the HTML output (mostly^†) without the use of any classes. This is a good reference point to work from when generating default output.

• Headings
• Paragraphs
• Font Stacks
• Blockquotes
• Details & Summary
• Lists
• Horizontal Rules
• Tabular Data^†
• Code^†
• Pre-formatted Text^†
• Inline Elements

---

Headings

Heading 1 (--fs-4 | weight: 800)

Heading 2 (--fs-3 | weight: 700)

Heading 3 (--fs-2 | weight: 700)

Heading 4 (--fs-1 | weight: 700)

Heading 5 (--fs-0 | weight: 700)

Heading 6 (--fs--1 | weight: 700)

---

Paragraphs (--fs-0 | weight: 400)

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Default <button>

Font Stacks

We will be using a number of fonts for the new website. Our primary font will be Barlow which is our in-house alternative sans-serif font when DINNext is too expensive to use.

We also occasionally use a serif font in some places. We will be using Georgia which is our in-house alternative serif font when Minion Pro is too expensive to use.

View typography documentation →

// Font families
$sans: 'Barlow', 'Barlow-fallback', sans-serif;
$serif: Georgia, serif;

Blockquotes

The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation— this can be changed. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the element. (source)

It is the unofficial force—the Baker Street irregulars. Cake brownie bear claw sesame snaps I love candy canes jelly. I love I love jujubes. Carrot cake chocolate cake I love jujubes carrot cake muffin tiramisu bear claw sesame snaps.

Note: the blockquote above is using the following pattern:

<figure>
  <blockquote>
    …
  </blockquote>
  <figcaption>
    … <cite> … </cite>
  </figcaption>
</figure>

Avian carriers can provide high delay, low throughput, and low altitude service. The connection topology is limited to a single point-to-point path for each carrier, used with standard carriers, but many carriers can be used without significant interference with each other, outside of early spring. This is because of the 3D ether space available to the carriers, in contrast to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision avoidance system, which increases availability.

Note: the blockquote above is using the following pattern:

<blockquote cite="https:// … .com">
   <p> … </p>
</blockquote>

Details & Summary (accessibility issues - may not use)

What is the population of New Orleans?

According to 2010 Census Bureau estimates, New Orleans' population is made up of approximately 343,829 residents.

What's a Po' Boy?

A po' boy (also po-boy, po boy) is a traditional sandwich from Louisiana. It almost always consists of meat, which is usually roast beef or fried seafood, often shrimp, crawfish, fish, oysters or crab.

How do I get to New Orleans?

Use Google Maps.

Lists

Definition list

Definition List Title

This is a definition list division.

Firefox

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).

Firefox

Mozilla Firefox

Fx

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

Ordered List

1. first item
2. second item
   1. second item first subitem
   2. second item second subitem
   3. second item third subitem
3. third item

1. first item
2. second item
   • second item first subitem
   • second item second subitem
   • second item third subitem
3. third item

Unordered List

• first item
• second item
  • second item first subitem
  • second item second subitem
    • second item second subitem first sub-subitem
    • second item second subitem second sub-subitem
    • second item second subitem third sub-subitem
  • second item third subitem
• third item

Horizontal rules

This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.

---

This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text. This is the second paragraph of text.

Tabular data

Code

Keyboard input: Cmd

Inline code: <div>code</div>

Sample output: This is sample output from a computer program.

Pre-formatted text

P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~ 

Note: I have added some styles to pre and code for this specific site which may not appear on the D9 style — just here for our code documentation.

Inline elements

This is a text link.

Strong is used to indicate strong importance.

This text has added emphasis.

The b element is stylistically different text from normal text, without any special importance.

The i element is text that is offset from the normal text.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

This text is deleted and This text is inserted.

This text has a strikethrough.

Superscript^®.

Subscript for things like H₂O.

This small text is small for for fine print, etc.

Abbreviation: HTML

This text is a short inline quotation.

This is a citation.

The dfn element indicates a definition.

The mark element indicates a highlight.

The variable element, such as x = y.

The time element: 2 weeks ago