Decorator (a--decorator)

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

Lism Component

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

Import

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

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.
`clipPath`,`boxSizing`	Passed to `style.clipPath` and `style.boxSizing` respectively.

Usage

Here are some decoration examples using <Decorator>.

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-x-s bd-y-s bdc="current" />
  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-x-e bd-y-e bdc="current" />
</Box>

<div class="l--box -p:30 -pos:relative">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.</p>
  <div class="a--decorator -pos:absolute -t:0 -l:0 -bd-x-s -bd-y-s -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-x-e -bd-y-e -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
</div>