DividerLabel

<Box bgc="base-2" c="text-2" py="40" ta="center">...Contents...</Box>
<Flex ai="center" g="20" lh="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>

<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">…Contents…</div>
<div class="l--flex -ai:center -g:20 -lh:s">
  <div class="a--divider -fx:1" aria-hidden="true"></div>
  <span class="-fz:s">Label Text</span>
  <div class="a--divider -fx:1" aria-hidden="true"></div>
</div>
<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">…Contents…</div>

<Box bgc="base-2" c="text-2" py="40" ta="center">...Contents...</Box>
<Flex ai="center" g="15" lh="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" lh="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>

<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">…Contents…</div>
<div class="l--flex -ai:center -g:15 -lh:s">
  <span class="-fz:s -px:5">Label Text</span>
  <div class="a--divider -fx:1 -o:pp" style="--bdc: currentColor" aria-hidden="true"></div>
</div>
<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">…Contents…</div>
<div class="l--flex -ai:center -g:15 -lh:s -c" style="--c: var(--blue)">
  <div class="a--divider -fx:1 -o:ppp" style="--bdc: currentColor; --bds: dotted; --bdw: 4px" aria-hidden="true"></div>
  <span class="-fz:s -px:5">Label Text</span>
</div>
<div class="l--box -bgc:base-2 -c:text-2 -py:40 -ta:center">…Contents…</div>

<Flex ai="center" g="15">
  <Box fx="1" bgc="base-2" py="40" ta="center">
    Box
  </Box>
  <Stack ai="center" g="10" lh="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>

<div class="l--flex -ai:center -g:15">
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">Box</div>
  <div class="l--stack -ai:center -g:10 -lh:s -fz:s -aslf:stretch">
    <div class="a--divider -wm:vertical-rl -fx:1" aria-hidden="true"></div>
    <span>Label</span>
    <div class="a--divider -wm:vertical-rl -fx:1" aria-hidden="true"></div>
  </div>
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">Box</div>
</div>

<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" lh="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" lh="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>

<div class="l--flex -ai:stretch -g:15">
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">Box</div>
  <div class="l--flex -wm:vertical-rl -ai:center -g:15 -lh:s -fz:xs -aslf:stretch">
    <span class="-px:5">Label</span>
    <div class="a--divider -fx:1" aria-hidden="true"></div>
  </div>
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">Box</div>
  <div class="l--flex -wm:vertical-rl -ai:center -g:15 -lh:s -fz:xs -aslf:stretch">
    <div class="a--divider -fx:1" aria-hidden="true"></div>
    <span class="-px:5">Label</span>
  </div>
  <div class="l--box -fx:1 -bgc:base-2 -py:40 -ta:center">Box</div>
</div>