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/Html.css";
Additionally, import the styles for the simple HTML components relating to the HTML expected to be used within.
import "device-agnostic-ui/Blockquote.css";
import "device-agnostic-ui/Code.css";
import "device-agnostic-ui/Heading.css";
import "device-agnostic-ui/LinkText.css";
import "device-agnostic-ui/List.css";
import "device-agnostic-ui/Para.css";
import "device-agnostic-ui/Pre.css";
import "device-agnostic-ui/Table.css";

Props

Use any valid <div> props.

Examples

How to import.
import Html from "device-agnostic-ui/Html.mjs";
Using JSX HTML.
import Html from "device-agnostic-ui/Html.mjs";

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/Html.mjs";

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

Heading 1

How to locally override heading font sizes.
import Html from "device-agnostic-ui/Html.mjs";

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

Heading 1

Tags