Divider

One line between a heading and its content, or above a footer.

import { Body, Caption, Divider, Stack } from "@hackcove/ui";

<Stack gap="lg">
  <Body as="p">The last paragraph of a page.</Body>
  <Divider />
  <Caption as="p">Hack Cove (Pty) Ltd</Caption>
</Stack>

import { Body, Card, Stack } from "@hackcove/ui";

<Stack>
  <Card title="Build 412">
    <Body>3 changed</Body>
  </Card>
  <Card title="Build 411">
    <Body>No changes</Body>
  </Card>
</Stack>

import { Body, Card, Divider, Stack } from "@hackcove/ui";

<Stack>
  <Card title="Build 412">
    <Body>3 changed</Body>
  </Card>
  <Divider />
  <Card title="Build 411">
    <Body>No changes</Body>
  </Card>
</Stack>

• Use it between two parts of a page that are not bordered, such as the content and its footer.
• The space around it is the layout's: put it in a Stack, never add margin.
• Do not draw it between bordered blocks such as Card: their borders and the gap already separate them.
• For a rule under a section title, SectionHeading has rule.

• It is an <hr>, which assistive tech announces as a separator. Use it only where the content really changes.