Block

  1. Headings
  2. Paragraphs
  3. Depth Utilities
  4. Tables
  5. Summary (accordion)
  6. Lists
Show code 
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Show code 
<span class="h1">Heading 1 - Style With Class Only 1</span>
<span class="h2">Heading 2 - Style With Class Only 2</span>
<span class="h3">Heading 3 - Style With Class Only 3</span>
<span class="h4">Heading 4 - Style With Class Only 4</span>
<span class="h5">Heading 5 - Style With Class Only 5</span>
<span class="h6">Heading 6 - Style With Class Only 6</span>
Heading 1 - Style With Class Only 1 Heading 2 - Style With Class Only 2 Heading 3 - Style With Class Only 3 Heading 4 - Style With Class Only 4 Heading 5 - Style With Class Only 5 Heading 6 - Style With Class Only 6

Heading Level 1 that is very long to simulate wrapping

Heading Level 2 that is very long to simulate wrapping

Heading Level 3 that is very long to simulate wrapping to a second line

Heading Level 4 that is very long to simulate wrapping to a second line

Heading Level 5 that is very long to simulate wrapping to a second line therefore illustrating the line height
Heading Level 6 that is very long to simulate wrapping to a second line therefore illustrating the line height

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur recusandae enim quae doloremque, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?

Show code 
<blockquote>
    <strong>A Blockquote</strong> Lorem ipsum dolor sit amet consectetur,
    adipisicing elit. <a href="#">Quisquam suscipit</a>
    ipsa placeat rerum cupiditate perspiciatis in id iste magni ex nostrum
    aspernatur non doloribus similique eos ipsam, consectetur, saepe tempora sit,
    dignissimos veniam.
</blockquote>
A Blockquote Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam suscipit ipsa placeat rerum cupiditate perspiciatis in id iste magni ex nostrum aspernatur non doloribus similique eos ipsam, consectetur, saepe tempora sit, dignissimos veniam.
Show code 
<p>
    A <strong>inline quote <code>&lt;q&gt;</code></strong> is a repetition of someone else's statement or thoughts. <q cite="#">
     A quote can be a repetition of a phrase, a full sentence, or a group of sentences. <q>Nesting possible.</q>
  </q>
</p>

A inline quote <q> is a repetition of someone else's statement or thoughts. A quote can be a repetition of a phrase, a full sentence, or a group of sentences. Nesting possible.

Depth utilities

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.

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.

Standard Table

Show code 
<table>
  <caption>
  Table Caption</caption>
  <thead>
    <tr>
      <th scope="col">Table Heading 1</th>
      <th scope="col">Table Heading 2</th>
      <th scope="col">Table Heading 3</th>
      <th scope="col">Table Heading 4</th>
      <th scope="col">Table Heading 5</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table Footer 1</td>
      <td>Table Footer 2</td>
      <td>Table Footer 3</td>
      <td>Table Footer 4</td>
      <td>Table Footer 5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
  </tbody>
</table>
Table Caption
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 3 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

Row-based Heading Table

Show code 
<table>
  <caption>
  Table Caption</caption>
  <tbody>
    <tr>
      <th scope="row">Table Heading 1<td>Table Cell 1</td>
      <td>Table Cell 1</td>
      <td>Table Cell 1</td>
    </tr>
    <tr>
      <th scope="row">Table Heading 2<td>Table Cell 2</td>
      <td>Table Cell 2</td>
      <td>Table Cell 2</td>
    </tr>
    <tr>
      <th scope="row">Table Heading 3<td>Table Cell 3</td>
      <td>Table Cell 3</td>
      <td>Table Cell 3</td>
    </tr>
    <tr>
      <th scope="row">Table Heading 4<td>Table Cell 4</td>
      <td>Table Cell 4</td>
      <td>Table Cell 4</td>
    </tr>
    <tr>
      <th scope="row">Table Heading 5<td>Table Cell 5</td>
      <td>Table Cell 5</td>
      <td>Table Cell 5</td>
    </tr>
  </tbody>
</table>
Table Caption
Table Heading 1 Table Cell 1 Table Cell 1 Table Cell 1
Table Heading 2 Table Cell 2 Table Cell 2 Table Cell 2
Table Heading 3 Table Cell 3 Table Cell 3 Table Cell 3
Table Heading 4 Table Cell 4 Table Cell 4 Table Cell 4
Table Heading 5 Table Cell 5 Table Cell 5 Table Cell 5

Responsive Table with sticky first column

Show code 
<div class="table-wrapper">
  <table class="sticky-col">
    <caption>
    Table Caption</caption>
    <tbody>
      <tr>
        <th scope="row">Table Heading 1<td>Table Cell 1</td>
        <td>Table Cell 1</td>
        <td>Table Cell 1</td>
      </tr>
      <tr>
        <th scope="row">Table Heading 2<td>Table Cell 2</td>
        <td>Table Cell 2</td>
        <td>Table Cell 2</td>
      </tr>
      <tr>
        <th scope="row">Table Heading 3<td>Table Cell 3</td>
        <td>Table Cell 3</td>
        <td>Table Cell 3</td>
      </tr>
      <tr>
        <th scope="row">Table Heading 4<td>Table Cell 4</td>
        <td>Table Cell 4</td>
        <td>Table Cell 4</td>
      </tr>
      <tr>
        <th scope="row">Table Heading 5<td>Table Cell 5</td>
        <td>Table Cell 5</td>
        <td>Table Cell 5</td>
      </tr>
    </tbody>
  </table>
</div>
Table Caption
Table Heading 1 Table Cell 1 Table Cell 1 Table Cell 1
Table Heading 2 Table Cell 2 Table Cell 2 Table Cell 2
Table Heading 3 Table Cell 3 Table Cell 3 Table Cell 3
Table Heading 4 Table Cell 4 Table Cell 4 Table Cell 4
Table Heading 5 Table Cell 5 Table Cell 5 Table Cell 5

Summary (accordion)

Show code 
<details>
  <summary>Details/Summary (accordion)</summary>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur <mark>recusandae enim quae doloremque</mark>, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?</p>
</details>
Details/Summary (accordion)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur recusandae enim quae doloremque, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?

Exclusive Details/Summary (Accordion)

The exclusive details/summary elements behave like an accordion, only one can be open at a time.

This is achieved by adding a shared name attribute to each details element.
The `open` can be set on one of them to have it open by default.

Show code 
<details data-details-exclusive name="exclusive-details" open>
  <summary>Exclusive Summary (accordion) 1</summary>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur <mark>recusandae enim quae doloremque</mark>, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?</p>
</details>
<details data-details-exclusive name="exclusive-details">
  <summary>Exclusive Summary (accordion) 2</summary>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur <mark>recusandae enim quae doloremque</mark>, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?</p>
</details>
<details data-details-exclusive name="exclusive-details">
  <summary>Exclusive Summary (accordion) 3</summary>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur <mark>recusandae enim quae doloremque</mark>, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?</p>
</details>
Exclusive Summary (accordion) 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur recusandae enim quae doloremque, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?

Exclusive Summary (accordion) 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur recusandae enim quae doloremque, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?

Exclusive Summary (accordion) 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur recusandae enim quae doloremque, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?

Lists

Definition list

Definition List Title
This is a definition list division.
Show code 
<dl>
  <dt>Definition List Title</dt>
  <dd>This is a definition list division.</dd>
</dl>

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
Show code 
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
Show code 
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Bare List

  • List Item 1
  • List Item 2
  • List Item 3
Show code 
<ul class="list--bare">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>