Decorator (a--decorator)

a--decorator is a class used as an empty element for decorating content.

Lism Component

Lism provides <Decorator> as an alias for <Lism atomic="decorator" aria-hidden="true" />.

Import

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

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

HTML Structure

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

Props

Prop	Description
`size`	Sets the decorator’s size (width and height) at once. When specified, the value is passed to `w` (`width`) and `ar='1/1'` (`aspect-ratio:1/1`) is applied automatically.

Usage

Decoration example

↓

Example

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<Box p="30" pos="relative">
  <p>
    Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut.
  </p>
  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-s bd-bs bdc="current" />
  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-e bd-be bdc="current" />
</Box>

<div class="l--box -p:30 -pos:relative">
  <p>
    Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut.
  </p>
  <div class="a--decorator -pos:absolute -t:0 -l:0 -bd-s -bd-bs -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
  <div class="a--decorator -pos:absolute -r:0 -b:0 -bd-e -bd-be -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
</div>