Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with strong, emphasis, underline, highlight, small text, <code>, and a link.

Here is a line break
between these two lines.

“This is a blockquote element, useful for quoting text.”

Subscript H2O and superscript E = mc2.


Lists

Unordered List
  • Item one
  • Item two
  • Item three
Ordered List
  1. First
  2. Second
  3. Third
Description List
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Article Section

This is an <article> element inside the Foundation grid. Resize the window to see the responsive behavior.

Placeholder image
A sample figure with an image and caption.

Another paragraph to show flow content. You can also include API abbreviations, , and more.

Table

Header 1 Header 2 Header 3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Table footer

Form Elements

Checkboxes & Radios

Buttons, Labels, Callouts

Primary Button Secondary Button Success Button Alert Button Warning Button Hollow Button

Default Label Success Label Alert Label Warning Label

Default Callout

This is a basic callout.

Primary Callout

Used to highlight important content.

Alert Callout

Used for warnings or errors.

Tabs

Content for Tab 1.

Content for Tab 2.

Content for Tab 3.

Accordion

Code-related Elements

Inline code, keyboard input Ctrl + C, and sample output Sample output text.


// Preformatted code block
function hello(name) {
  console.log("Hello, " + name + "!");
}
hello("World");
      

Media Elements

Image:

Another placeholder image

Progress & Meter:

70% 60%

Details & Summary

Click to expand details

This is hidden content revealed by the <details> element.