Inset
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>.
Import
import { Inset } from '@marigold/components';Props
| Property | Type | Default | Description |
|---|---|---|---|
space | number | none | Space on all sides |
spaceX | number | none | Horizontal space |
spaceY | number | none | Vertical space |
Examples
Equal Spacing
In order to add equal spacing to all sides use the space property like shown below.
Preview
Code
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.
Preview
Code
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.