Lism CSS
Docs
Search

DividerLabel

This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.

Examples of labeled divider layouts built with Lism.

Examples

↓
Example
…Contents…
Label Text
…Contents…
<Box bgc="base-2" c="text-2" py="40" ta="center">...Contents...</Box>
<Flex ai="center" g="20" hl="s">
  <Divider fx="1" />
  <Inline fz="s">Label Text</Inline>
  <Divider fx="1" />
</Flex>
<Box bgc="base-2" c="text-2" py="40" ta="center">...Contents...</Box>
↓
Example
…Contents…
Label Text
…Contents…
Label Text
…Contents…
<Box bgc="base-2" c="text-2" py="40" ta="center">...Contents...</Box>
<Flex ai="center" g="15" hl="s">
  <span class="-fz:s -px:5">Label Text</span>
  <Divider fx="1" bdc="currentColor" o="pp" />
</Flex>
<Box bgc="base-2" c="text-2" py="40" ta="center">...Contents...</Box>
<Flex ai="center" g="15" hl="s" c="blue">
  <Divider fx="1" bdc="currentColor" bds="dotted" bdw="4px" o="ppp" />
  <span class="-fz:s -px:5">Label Text</span>
</Flex>
<Box bgc="base-2" c="text-2" py="40" ta="center">...Contents...</Box>

Vertical orientation

↓
Changing flex-direction
Box
Label
Box
<Flex ai="center" g="15">
  <Box fx="1" bgc="base-2" py="40" ta="center">
    Box
  </Box>
  <Stack ai="center" g="10" hl="s" fz="s" aslf="stretch">
    <Divider fx="1" wm="vertical-rl" />
    <span>Label</span>
    <Divider fx="1" wm="vertical-rl" />
  </Stack>
  <Box fx="1" bgc="base-2" py="40" ta="center">
    Box
  </Box>
</Flex>
↓
Vertical label text
Box
Label
Box
Label
Box
Resize 
<Flex ai="stretch" g="15">
  <Box fx="1" bgc="base-2" py="40" ta="center">
    Box
  </Box>
  <Flex wm="vertical-rl" ai="center" g="15" hl="s" fz="xs" aslf="stretch">
    <span class="-px:5">Label</span>
    <Divider fx="1" />
  </Flex>
  <Box fx="1" bgc="base-2" py="40" ta="center">
    Box
  </Box>
  <Flex wm="vertical-rl" ai="center" g="15" hl="s" fz="xs" aslf="stretch">
    <Divider fx="1" />
    <span class="-px:5">Label</span>
  </Flex>
  <Box fx="1" bgc="base-2" py="40" ta="center">
    Box
  </Box>
</Flex>

© 2026 Lism CSS.