Container

This page demonstrates how to use the is--container class — which sets container-type — through components.

is--container can be applied via the isContainer property on any component.

A dedicated <Container> component is also available as an alias for <Lism isContainer>.

This section introduces that dedicated component.

Props

The following props are available on <Container>.

// ①
<Flow isContainer>...</Flow>

// ②
<Container layout='flow'>...</Container>

Import

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

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

Usage

When isContainer is set on a Lism component, or when the <Container> component is used, the is--container class is applied and container queries become active inside the element.

<Container isWrapper='s' p='20'>
  <Box bd p={['10','30']}>This Box switches its padding based on the container size.</Box>
</Container>

<div class="is--container is--wrapper -content:s -p:20">
  <div class="l--box -bd -p:10 -p_sm" style="--p_sm:var(--s30)">This Box switches its padding based on the container size.</div>
</div>