Divider

import

import { Divider, DividerTitle } from '@bone-ui/divider'

Basic

Loading...

<Divider></Divider>

<Divider></Divider>

LIVE DEMO

Vertical

Loading...

<Box h-60 toCenter> <Divider orientation="vertical"></Divider> </Box>

<Box h-60 toCenter>
  <Divider orientation="vertical"></Divider>
</Box>

LIVE DEMO

With title

Loading...

<Divider> <DividerTitle>INTRO</DividerTitle> </Divider>

<Divider>
  <DividerTitle>INTRO</DividerTitle>
</Divider>

LIVE DEMO

With title vertical

Loading...

<Box h-100 toCenter> <Divider orientation="vertical"> <DividerTitle>INTRO</DividerTitle> </Divider> </Box>

<Box h-100 toCenter>
  <Divider orientation="vertical">
    <DividerTitle>INTRO</DividerTitle>
  </Divider>
</Box>

LIVE DEMO

Horizontal Example

Loading...

<Box> <Box> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. </Box> <Divider my4> <DividerTitle>INTRO</DividerTitle> </Divider> <Box> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. </Box> </Box>

<Box>
  <Box>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a
    libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum
    quae eum fugit earum.
  </Box>
  <Divider my4>
    <DividerTitle>INTRO</DividerTitle>
  </Divider>
  <Box>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a
    libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum
    quae eum fugit earum.
  </Box>
</Box>

LIVE DEMO

Vertical Example

Loading...

<Box toCenter spaceX2 h-20> <Box>Item1</Box> <Divider orientation="vertical"></Divider> <Box>Item2</Box> <Divider orientation="vertical"></Divider> <Box>Item3</Box> </Box>

<Box toCenter spaceX2 h-20>
  <Box>Item1</Box>
  <Divider orientation="vertical"></Divider>
  <Box>Item2</Box>
  <Divider orientation="vertical"></Divider>
  <Box>Item3</Box>
</Box>

LIVE DEMO

Customize style

Loading...

<Box spaceY4> <Divider bgRed500></Divider> <Divider h-2></Divider> <Divider h-4></Divider> <Divider h-8></Divider> </Box>

<Box spaceY4>
  <Divider bgRed500></Divider>
  <Divider h-2></Divider>
  <Divider h-4></Divider>
  <Divider h-8></Divider>
</Box>

LIVE DEMO