Lism Props

The props specific to Lism CSS that <Lism>-family components accept are called Lism Props.

as

Specifies the HTML tag or external component to render. Defaults to div.

<Lism as="p">Lorem ipsum texts...</Lism>

↓

<p>Lorem ipsum texts...</p>

By specifying an external component, you can have <Lism> render as a different external component.

import Image from 'next/image';

<Media as={Image} src="..." p="20" bd />

Lism Props (p and bd in the example above) are first processed to generate className and style, which are then passed to the component specified by as. This is useful when you want to use Lism Props on non-Lism components.

lismClass

A dedicated slot for the component’s base c-- class (Component Class). Classes passed here are also the target of BEM expansion by the variant prop.

<Lism p="10" lismClass="c--myComponent">Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent -p:10">Lorem ipsum texts...</div>

variant

Outputs a variation class for lismClass. When multiple classes are specified in lismClass, the variation class is applied to the first class.

<Lism lismClass="c--myComponent" variant="secondary">Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent c--myComponent--secondary">Lorem ipsum texts...</div>

layout / atomic

layout and atomic are props for specifying Layout Primitive classes (l--*) and Atomic Primitive classes (a--*), respectively.

For example, specifying layout='flow' outputs the .l--flow class, and specifying atomic='divider' outputs the .a--divider class.

<Lism layout="flow">Lorem ipsum texts...</Lism>
<Lism atomic="divider" />

↓

<div class="l--flow">Lorem ipsum texts...</div>
<div class="a--divider"></div>

set / util

set specifies Set Class entries (set--{value}),
util specifies Utility Class entries (u--{value}).

<Lism set="shadow" util="cbox">...</Lism>

↓

<div class="set--shadow u--cbox">...</div>

Multiple values

Both props accept space-separated values.

<Lism set="hov transition" util="cbox trim">...</Lism>

Excluding with - prefix

Prefix a value with - to exclude that identifier. This is useful when you want to remove a class that has been applied internally by a component.

{/* Exclude set="plain" (set--plain) that MyButton applies by default */}
<MyButton set="-plain">...</MyButton>

{/* Exclude u--trim and add u--cbox */}
<MyCallout util="-trim cbox">...</MyCallout>

Trait Props

A set of props corresponding to Trait Primitives classes.

CSS Props

Major CSS properties can be specified using shorthand notation. For example, font-size can be written as fz, and padding as p.

The output format is determined by the value (value) specified via prop={value}:

Code examples

<Lism fz="l" p="20">...</Lism>
// → <div class="-fz:l -p:20">...</div>

<Lism c="red">...</Lism>
// → <div class="-c" style="--c:var(--red)">...</div>

<Lism p="-" bdrs>contents</Lism>
// → <div class="-p -bdrs">contents</div>

This is useful when you want to define the variable value in CSS, or when you want to inherit the same variable from a parent element.

<Lism bd bdc="#000" bdw="2px">...</Lism>
// → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>

<Lism fz="20px">contents</Lism>
// → <div class="-fz" style="--fz:20px">contents</div>

<Lism o="0.75">contents</Lism>
// → <div style="opacity:0.75">contents</div>

Force output as a class with :

Even if no corresponding Property Class exists, prefixing a value with : will output the string after it as a class name.

<Lism p=":hoge">...</Lism>
// → <div class="-p:hoge">...</div>

Add a custom class in your CSS and use it as needed.

.-p\:hoge {
  /* ... your styles ... */
}

Responsive syntax

BP-supported properties can specify values per breakpoint (sm, md) using arrays or objects.

Learn more about responsive support

<Lism p={['20', '30', '5rem']}>...</Lism>

<div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:5rem">
  ...
</div>

<Lism p={[null, null, '40']}>...</Lism>

<div class="-p_md" style="--p_md:var(--s40)">
  ...
</div>

For properties that do not support responsive behavior by default (i.e., no CSS is provided), you can add support via SCSS customization.

exProps

Accepts props that you want to skip Lism Props processing for as an object.

This is handy when a prop name of the external component specified via as conflicts with a Lism Prop name, and you want to explicitly mark it as belonging to the external component.

<Icon as={Hoge} exProps={{ size: '1em' }} p="10" fz="l">
  ...
</Icon>

By doing this, the Lism Icon component processes p and fz, while the external component Hoge reliably receives size. (In this particular example, exProps is not strictly necessary since Lism does not currently process size, but explicitly marking external component props ensures no future conflicts.)

Class output order

The class attribute generated by <Lism> is output in the following order:

[className] [c--] [a--] [l--] [is--] [set--] [u--] [-]