Inset

The <Inset> component is a layout component that acts as a container which adds spacing around its children.

Usage

The component should be used whenever you need to add some whitespace around elements. For example, around a <Form> or inside a <Card>.

Equal spacing

In order to add equal spacing to all sides use the space property with an inset recipe token (square-*, squish-*, stretch-*) or a numeric scale value.

import { Inset } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => (  <div className="bg-bg-surface-sunken">    <Inset space="square-regular">      <Rectangle height="80px" />    </Inset>  </div>);

Horizontal and vertical spacing

A common use case is to give children of a content component some space, you can do this for example with wrapping an <Inset> around the card content like shown below.

To set only horizontal or vertical spacing, or to define different values for each, use the spaceX property for horizontal spacing and the spaceY property for vertical spacing. These props accept padding spacing tokens (padding-tight, padding-snug, padding-regular, padding-relaxed, padding-loose), as well as numeric scale values.

import { venueTypes, venues } from '@/lib/data/venues';import { Card, Headline, Inline, Inset, Text } from '@marigold/components';export default () => {  return (    <Card>      <Inset spaceX="padding-regular" spaceY="padding-snug">        <Headline level={3}>{venues[0].name}</Headline>        <Inline>          <Text fontStyle="italic">            {venues[0].city} | {venueTypes[venues[0].type]}          </Text>        </Inline>        <Text>{venues[0].description}</Text>      </Inset>    </Card>  );};

Props

Inset

Related