Hyper Elementsv0.3
Get started

Blocks

Divider

A horizontal line. The Divider component's props, styles and an example, in Hyper Elements.

import { Divider } from "@hyper-elements/react";

Example

Show the code
divider.tsx
import { Column, Divider, Email, Text } from "@hyper-elements/react";

export default function Example() {
  return (
    <Email width={520} style={{ backgroundColor: "#ffffff", fontFamily: "Inter, Helvetica, Arial, sans-serif", color: "#0f172a", gap: 16 }}>
      <Column style={{ padding: 24, gap: 16 }}>
        <Text>Above the line</Text>
        <Divider style={{ borderTop: "2px solid #ef4638", width: "40%" }} />
        <Text>Below the line</Text>
        <Divider style={{ borderTop: "1px dashed #94a3b8" }} />
      </Column>
    </Email>
  );
}

Reference

A horizontal line.

Holds: nothing. Drawn in: email, page.

style:

  • borderTop: line (default {"width":1,"style":"solid","color":"#bbbbbb"}). The line, as CSS border-top: “1px solid #bbbbbb”.
  • width: a length (a number of px, %) (default "100%")
  • padding: insets

mobile (on phones): width, padding.