Html

Displays simple HTML with styles, typically derived from markdown.

Supported HTML:

It implements the <div> element.

The global theme provides a range of responsive heading font size CSS variables that can be locally overridden:

  1. --daui-h1-font-size
  2. --daui-h2-font-size
  3. --daui-h3-font-size
  4. --daui-h4-font-size
  5. --daui-h5-font-size
  6. --daui-h6-font-size

Props

Use any valid <div> props.

Examples

Using JSX HTML.
import { Html } from 'device-agnostic-ui'

<Html>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>Paragraph containing <code>code</code> and a <a href="/">link</a>.</p>
  <blockquote>Blockquote containing text.</blockquote>
  <blockquote>
    <p>Blockquote containing paragraphs.</p>
    <p>Blockquote containing paragraphs.</p>
  </blockquote>
  <ul>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
  </ul>
  <ol>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
  </ol>
  <pre><code>Preformatted code</code></pre>
  <table>
    <thead>
      <tr>
        <th scope="col">Table header</th>
        <th scope="col">Table header</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    </tbody>
  </table>
  <p>
    <img
      src="/static/example-picture/example.png"
      width="180"
      alt="Alternate text."
    />
  </p>
</Html>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph containing code and a link.

Blockquote containing text.

Blockquote containing paragraphs.

Blockquote containing paragraphs.

  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
Preformatted code
Table headerTable header
Table cellTable cell
Table cellTable cell

Alternate text.

Using a HTML string.
import { Html } from 'device-agnostic-ui'

<Html dangerouslySetInnerHTML={{ __html: '<h1>Heading 1</h1>' }} />

Heading 1

How to locally override heading font sizes.
import { Html } from 'device-agnostic-ui'

<Html style={{ '--daui-h1-font-size': '150%' }}>
  <h1>Heading 1</h1>
</Html>

Heading 1

Tags