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 like shown below. You can see that the rectangle has a distance of 2rem to the parent div.

import { Inset } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => (  <div className="bg-bg-surface-sunken">    <Inset space={8}>      <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.

import { venueTypes, venues } from '@/lib/data/venues';import { Card, Headline, Inline, Inset, Text } from '@marigold/components';export default () => {  return (    <Card>      <Inset spaceX={4} spaceY={8}>        <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