This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Divider

Version: 0.133.0

Divider

It renders an hr element and grants accessibility described on the WAI-ARIA Separator Role.

Import

import { Divider } from '@vtex/admin-ui'

Behavior

Loading...

Variation

Horizontal

By default, the orientation property has a horizontal value.

<Card csx={{ width: 500 }}>
<Stack>
<Heading>Tolerance</Heading>
<Paragraph csx={{ color: 'muted' }}>
Allows orders to be placed even if they pass X% of the account`s credit
limit. Tolerance is set per account.
</Paragraph>
</Stack>

<Divider csx={{ marginY: 6 }} />

<Stack>
<Heading>Automatic account creation</Heading>
<Paragraph csx={{ color: 'muted' }}>
Allows users who have not been previously credited to close a purchase.
</Paragraph>
</Stack>
</Card>

Vertical

The orientation property can also have a vertical value.

<Card csx={{ width: 600 }}>
<Columns>
<Column>
<Heading>Cards</Heading>
<Paragraph csx={{ color: 'muted' }}>
In Cards, your customer is given autonomy to manage credit cards related
to his account, and can add, remove or edit credit card data.
</Paragraph>
</Column>

<Divider orientation="vertical" csx={{ marginX: 6 }} />

<Column>
<Heading>Personal data</Heading>
<Paragraph csx={{ color: 'muted' }}>
In this section, the user can manage their personal data registered on
the store site.
</Paragraph>
</Column>
</Columns>
</Card>

Props

NameTypeDescriptionRequiredDefault
csxStyleObjectCustom styles🚫{}
orientationhorizontal, verticalDivider orientation🚫'horizontal'