Component to add spacing to children.

The <Inset> component is a layout component that acts as a container which adds spacing around its children. It can either add equal spacing to all sides (space) or add horizontal (spaceX) and vertical (spaceY) spacing sepretaly.

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



To import the component you just have to use this code below.

import { Inset } from '@marigold/components';


spacenumbernoneSpace on all sides
spaceXnumbernoneHorizontal space
spaceYnumbernoneVertical space


Equal Spacing

In order to add equal spacing to all sides use the space property like shown below.

Marigold has oblong and lanceolate leaves with whole margins. Some varieties of marigold have leaves with toothed edges. Leaves are spirally arranged on the branches.

Horzintal and vertical Spacing

If you need to only set horizontal or vertical spacing, or want a different horizontal and vertical spacing, use the spaceX and spaceY respectively.

Marigold is usually yellow, orange, red and maroon in color. Each flower consists of large number of petals that overlap. Biggest petals are located on a periphery and smallest in a center of a flower. Flowers contain both male (stamen) and female (pistil) reproductive organs.