Content

The Content component is a core component, and is used to display text and other basic semantic content in a styled way.

<div class="tng-content">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <hr />
  <p>
    Sit sit
    <strong>occaecat minim</strong>
    aute tempor veniam Lorem non et anim. Id in
    <em>quis eiusmod</em>
    ea velit sit qui aute
    <mark>cillum aliquip</mark>
    ad aliqua ex. Proident
    <sup>irure</sup>
    proident
    <sub>labore occaecat</sub>
    ex velit Lorem.
  </p>
  <p>
    This is
    <small>small</small>
    .
  </p>
  <details>
    <summary>Details</summary>
    <p>Details content</p>
  </details>
  <a href="#">Link</a>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
  </ol>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
  <blockquote>
    <p>
      "Excepteur nisi incididunt excepteur minim laboris cillum sint
      consectetur. Nisi excepteur amet aliqua excepteur incididunt aliqua
      laboris. Laboris dolor ea amet cillum pariatur excepteur sint
      reprehenderit."
    </p>
  </blockquote>
</div>

Default
Contrast

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident ^irure proident _{labore occaecat} ex velit Lorem.

This is small.

Details

Details content

Link

List item 1
List item 2

List item 1
List item 2

Header 1	Header 2
Data 1	Data 2

"Excepteur nisi incididunt excepteur minim laboris cillum sint consectetur. Nisi excepteur amet aliqua excepteur incididunt aliqua laboris. Laboris dolor ea amet cillum pariatur excepteur sint reprehenderit."