Divider (a--divider)

a--dividerは、コンテンツ間に区切り線を描画するためのクラスです。--bdcはvar(--divider)に初期セットされます。

CSS

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

Lismコンポーネント

<Lism atomic="divider" aria-hidden="true" />のエイリアスとして、<Divider>を用意しています。

Import

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

出力されるHTML構造

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

Usage

基本例

↓

例

…Contents…

リサイズ

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

スタイルの変更例

↓

スタイルの変更例

…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>

縦方向の区切り線

↓

縦方向の区切り線

…Contents…

リサイズ

<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>