Trait Class

Trait Classes declare a role on an element or attach a feature to it.
They belong to @layer lism-trait.

is--{name}: declares a role / existence (“is a …”).
has--{name}: attaches a feature (“has a …”).

`is--*` (Role declaration)

Class	Description
`is--container`	Defines the reference element for container queries
`is--wrapper`	Wrapper element that controls content width
`is--layer`	Overlay layer positioned over a parent element
`is--boxLink`	Makes the entire box a clickable link
`is--coverLink`	A link with a clickable area covering the entire parent element (→ see `is--boxLink`)
`is--side`	For the side element of `l--sideMain` (→ see `l--sideMain`)
`is--skipFlow`	Cancels spacing with the next sibling inside `l--flow` (→ see `l--flow`)

`has--*` (Feature attachment)

`has--transition`

Sets the transition property using dedicated variables.

.has--transition {
  --duration: var(--transition-duration, 0.25s);
  --ease: ease;
  --delay: 0s;
  --transitionProps: all;
  transition: var(--duration) var(--ease) var(--delay);
  transition-property: var(--transitionProps);
}

↓

Usage example

Example

<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>

See the hover documentation page for usage examples.

-hov

How to use the -hov property classes for controlling hover behavior and transitions.

`has--gutter`

A class that adds predefined horizontal spacing to the left and right sides of content. It is provided as a separate class from padding utilities to reserve a consistent horizontal margin across the entire site.

Class name	Spacing	Default value
`has--gutter`	`--gutter-size`	`var(--s30)`

.has--gutter {
  padding-inline: var(--gutter-size);
}

↓

Example

Lorem ipsum content…

Resize

<div class="has--gutter">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>

`has--snap`

Allows scroll-snap- properties to be set via CSS variables.

.has--snap {
  --snapType: both mandatory;
  --snapAlign: start;
  --snapStop: normal;
  scroll-snap-type: var(--snapType);

  & > * {
    scroll-snap-align: var(--snapAlign);
    scroll-snap-stop: var(--snapStop);
  }
}

Variable	Purpose	Default
`--snapType`	Value for `scroll-snap-type`	`both mandatory`
`--snapAlign`	Value for child `scroll-snap-align`	`start`
`--snapStop`	Value for child `scroll-snap-stop`	`normal`

`has--mask`

Applies a mask to the element itself in combination with the --maskImg variable.

.has--mask {
  --maskPos: 50%;
  --maskSize: contain;
  --maskRepeat: no-repeat;
  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
}

Variable	Purpose	Default
`--maskImg`	Mask image (SVG, etc.)	—
`--maskPos`	Mask position	`50%`
`--maskSize`	Mask size	`contain`
`--maskRepeat`	Mask repeat	`no-repeat`

In Lism components, use hasMask together with css={{ '--maskImg': getSvgUrl(svgString) }}.

↓

Example

<Media
  src="https://cdn.lism-css.com/img/u-2.jpg"
  width="960"
  height="640"
  alt=""
  loading="lazy"
  ar="og"
  hasMask
  css={{ '--maskImg': getSvgUrl(`<svg ...>...</svg>`) }}
/>

Trait Class

is--* (Role declaration)

has--* (Feature attachment)

has--transition

has--gutter

has--snap

has--mask

`is--*` (Role declaration)

`has--*` (Feature attachment)

`has--transition`

`has--gutter`

`has--snap`

`has--mask`