Headings
Heading Level 1 is for page titles link
Heading Level 2 is for page section titles link
Heading Level 3 is for block headers and subsection titles link
Heading Level 4 is for capsule headers (immediately above capsule text) link
Heading Level 5 is for SUB-headers (immediately below other headers) link
Heading Level 6 is barely used at all link
Text
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 block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
this paragraph is above a horizontal rule
this paragraph is below a horizontal rule
This is a text link. This is a visited 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 set off 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 H2O
This small text is small for for fine print, etc.
Abbreviation: HTML
Keybord input: Cmd
This text is a short inline quotation
This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
This is what inline code looks like.
This is sample output from a computer program
The variable element, such as x = y
Font weights & families
| sans black (italic) | serif black (italic) | monospace black (italic) |
| sans extrabold (italic) | serif extrabold (italic) | monospace extrabold (italic) |
| sans bold (italic) | serif bold (italic) | monospace bold (italic) |
| sans semibold (italic) | serif semibold (italic) | monospace semibold (italic) |
| sans medium (italic) | serif medium (italic) | monospace medium (italic) |
| sans regular (italic) | serif regular (italic) | monospace regular (italic) |
| sans light (italic) | serif light (italic) | monospace light (italic) |
| sans extralight (italic) | serif extralight (italic) | monospace extralight (italic) |
| sans thin (italic) | serif thin (italic) | monospace thin (italic) |
Lists
- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
-
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
- This is the last list item
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
-
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an ordered list
- This is the last list item
Images
Details/Summary
Summary of details
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.
Table
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 345123412341234123423 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Form
Colors
Color primitives
| fg-red | bg-red |
| fg-orange | bg-orange |
| fg-brown | bg-brown |
| fg-yellow | bg-yellow |
| fg-sage | bg-sage |
| fg-green | bg-green |
| fg-forest | bg-forest |
| fg-teal | bg-teal |
| fg-sky | bg-sky |
| fg-blue | bg-blue |
| fg-navy | bg-navy |
| fg-purple | bg-purple |
| fg-pink | bg-pink |
Gray primitives
| fg-gray-0 | bg-gray-0 |
| fg-gray-1 | bg-gray-1 |
| fg-gray-2 | bg-gray-2 |
| fg-gray-3 | bg-gray-3 |
| fg-gray-4 | bg-gray-4 |
| fg-gray-5 | bg-gray-5 |
| fg-gray-6 | bg-gray-6 |
| fg-gray-7 | bg-gray-7 |
| fg-gray-8 | bg-gray-8 |
| fg-gray-9 | bg-gray-9 |
| fg-gray-95 | bg-gray-95 |
| fg-gray-100 | bg-gray-100 |
Abstract colors
| fg-loud | bg-loud |
| fg-spoken | bg-spoken |
| fg-soft | bg-soft |
| fg-hushed | bg-hushed |
| fg-breathy | bg-breathy |
| fg-whisper | bg-whisper |
| fg-quiet | bg-quiet |
| fg-silent | bg-silent |
| fg-emphasis | bg-emphasis |
| fg-danger | bg-danger |
| fg-warning | bg-warning |
| fg-success | bg-success |
| fg-info | bg-info |
| fg-highlight | bg-highlight |
| fg-hero | bg-hero |
| fg-strange | bg-strange |