Divider

A divider is a visual element used to create a separation or divide between sections, content or components within a user interface.

Overview

pie-divider is a Web Component built using Lit. It offers a simple and accessible divider component for web applications.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

To install pie-divider in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Prop	Type	Description	Default
variant	`"default"` `"inverse"`	Sets the variant of the divider.	`"default"`
label	`string`	The label text for the divider. Label is only available for the horizontal variant.	`""`
orientation	`"horizontal"` `"vertical"`	Sets the orientation of the divider.	`"horizontal"`

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/divider.js'

<!-- pass js file into <script> tag -->
<pie-divider></pie-divider>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/divider.js';

<pie-divider></pie-divider>

For React Applications:

import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';

<PieDivider></PieDivider>

// React templates (using Next 13 and SSR)
import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';

<PieDivider></PieDivider>