Divider (a--divider)

a--divider is a class for rendering a dividing line between content sections. --bdc is initialized to var(--divider).

CSS

.a--divider {
  --bdc: var(--divider);
  --bds: solid;
  --bdw: 1px;
  border-block-start: var(--bdw) var(--bds) var(--bdc);
}

Lism Component

<Divider> is an alias for <Lism atomic="divider" aria-hidden="true" />.

Import

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

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

HTML Structure

div.a--divider[aria-hidden="true"]

Usage

Basic example

↓

Example

…Contents…

Resize

<Box bgc="base-2" py="40" ta="center">...Contents...</Box>
<Divider />
<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"></div>
<div class="l--box -bgc:base-2 -py:40 -ta:center">...Contents...</div>

Customizing the style

↓

Customizing the style

…Contents…

Resize

<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

↓

Vertical dividing line

…Contents…

Resize

<Flex ai="center" g="20">
  <Box fx="1" bgc="base-2" py="40" ta="center">
    ...Contents...
  </Box>
  <Divider wm="vertical-rl" 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 -wm:vertical-rl -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>