Divider

The <hr> HTML element represents a thematic break between contents: for example, a change of information in a card element. It is defined in semantic terms rather than styling purposes, if you wish to draw a line, you should do so using appropriate CSS.

Examples

Dashed

<Content>
  <div style={{ flexDirection: "column" }}>
    <H3>Horizontal</H3>
    <Divider />
    <Text>Divider</Text>
  </div>
  <div>
    <H3>Vertical</H3>
    <Divider position="vertical" />
    <Text>Divider</Text>
  </div>
</Content>

Solid

<Content>
  <div style={{ flexDirection: "column" }}>
    <H3>Horizontal</H3>
    <Divider variant="solid" />
    <Text>Divider</Text>
  </div>
  <div>
    <H3>Vertical</H3>
    <Divider variant="solid" position="vertical" />
    <Text>Divider</Text>
  </div>
</Content>

Colors

<Content>
  <div style={{ flexDirection: "column" }}>
    <H3>Secondary</H3>
    <Divider color="currentColor" />
    <Text>Color</Text>
  </div>
  <div style={{ flexDirection: "column", color: "black" }}>
    <H3>Current</H3>
    <Divider color="currentColor" />
    <Text>Color</Text>
  </div>
</Content>