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

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Html.css';
Additionally, import the styles for the simple HTML components relating to the HTML expected to be used within.
import 'device-agnostic-ui/public/components/Blockquote.css';
import 'device-agnostic-ui/public/components/Code.css';
import 'device-agnostic-ui/public/components/Heading.css';
import 'device-agnostic-ui/public/components/LinkText.css';
import 'device-agnostic-ui/public/components/List.css';
import 'device-agnostic-ui/public/components/Para.css';
import 'device-agnostic-ui/public/components/Pre.css';
import 'device-agnostic-ui/public/components/Table.css';

Props

Use any valid <div> props.

Examples

Deep import.
import Html from 'device-agnostic-ui/public/components/Html.js';
Deep require.
const Html = require('device-agnostic-ui/public/components/Html.js');
Index import. Convenient, but technically inferior to a deep import.
import { Html } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Html } = require('device-agnostic-ui');
Using JSX HTML.
import { Html } from 'device-agnostic-ui';

const result = (
  <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="https://deviceagnosticui.com">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';

const result = (
  <Html dangerouslySetInnerHTML={{ __html: '<h1>Heading 1</h1>' }} />
);

Heading 1

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

const result = (
  <Html style={{ '--daui-h1-font-size': '150%' }}>
    <h1>Heading 1</h1>
  </Html>
);

Heading 1

Tags