Divider

A component that renders a dividing line. --bdc is initialized to var(--divider).

Structure

div.a--divider

CSS

Props

Property	Description
`bdw`,`bds`,`bdc`	Border properties for the dividing line

Import

import { Divider } from 'lism-css/react';

Usage

↓

Example

…Contents…

リサイズ可能

<Box bgc='base-2' py='40' ta='center'>...Contents...</Box>
<Divider />
<Box bgc='base-2' py='40' ta='center'>...Contents...</Box>

↓

Customizing the style

…Contents…

リサイズ可能

<Box bgc='base-2' py='40' ta='center'>...Contents...</Box>
<Divider bds='dotted' bdw='4px' bdc='blue'/>
<Box bgc='base-2' py='40' ta='center'>...Contents...</Box>

<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>
<div class="a--divider" aria-hidden="true" style="--bds:dotted;--bdw:4px;--bdc:var(--blue)"></div>
<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>

↓

Vertical dividing line

…Contents…

リサイズ可能

<Flex ai='center' g='20'>
  <Box fx='1' bgc='base-2' py='40' ta='center'>...Contents...</Box>
  <Divider isVertical bds='dashed' bdw='2px' aslf='stretch' />
  <Box fx='1' bgc='base-2' py='40' ta='center'>...Contents...</Box>
</Flex>

<div class="l--flex -g:20 -ai:center">
  <div class="-fx:1 -bgc:base-2 -py:40 -ta:center">...Contents...</div>
  <div class="a--divider is--vertical -aslf:stretch" style="--bds:dashed;--bdw:2px" aria-hidden="true"></div>
  <div class="-fx:1 -bgc:base-2 -py:40 -ta:center">...Contents...</div>
</div>