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 p 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-muted">    <Inset p="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 px property for horizontal spacing and the py 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 { Headline, Inline, Inset, Text } from '@marigold/components';export default () => {  return (    <div className="bg-muted rounded-md">      <Inset px="padding-regular" py="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>    </div>  );};

Props

Inset

Related