Divider

Component

Storybook

Figma Demo

Guidelines

Variations

Dividers may be oriented horizontally or vertically. They are currently only offered in a neutral color.

Usage

Use dividers to create distinctions between pieces of content or content areas. For example, dividers may be used to separate types of content, such as groups of links within the side menu.

Dividers should typically be set to fill their parent container in both orientations.

Component Specs

API

• class: string | Default: undefined
  Extra classes provided to the component.

• testId: string | Default: 'test-divider'
  The test id of the divider.

• variant: 'horizontal' | 'vertical' | Default: 'horizontal'
  The variant of the divider.

Example

<script>
	import { Divider } from '@getprovi/craft-svelte';
</script>

<Divider />
<!-- default is horizontal -->
<Flex>
	<Divider variant="vertical" />
</Flex>
<!-- vertical dividers need to be in a Flex container -->

Types

interface $$Props {
	class?: string | undefined | null;
	testId?: string;
	variant?: 'horizontal' | 'vertical';
}