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.

Preview

Code

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.

Preview

Code

Giggle Grounds

Laughville | Outdoor Venue

A charming open-air venue perfect for comedy shows under the stars, bringing laughter to every corner of Laughville.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Inset stories

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

aria-live?

"off" | "polite" | "assertive";

Indicates the level of importance for updates in the live region.

'off': Updates are not announced unless focused.
'polite': Updates are announced when the user is idle.
'assertive': Updates are announced immediately, interrupting other announcements.

children

ReactNode;

The children of the component

id?

string;

The element's unique identifier. See MDN.

role?

"region" | (string & {});

Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.

space?

PaddingSpaceProp;

The space between the children. You can see allowed tokens here.

spaceX?

PaddingSpacePropX;

Horizontal alignment for the children. You can see allowed tokens here.

spaceY?

PaddingSpacePropY;

Vertical alignment for the children. You can see allowed tokens here.

Building layouts

Learn how to build layouts.

Last update: 3 months ago

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.

Preview

Code

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.

Preview

Code

Giggle Grounds

Laughville | Outdoor Venue

A charming open-air venue perfect for comedy shows under the stars, bringing laughter to every corner of Laughville.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Inset stories

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

aria-live?

"off" | "polite" | "assertive";

Indicates the level of importance for updates in the live region.

'off': Updates are not announced unless focused.
'polite': Updates are announced when the user is idle.
'assertive': Updates are announced immediately, interrupting other announcements.

children

ReactNode;

The children of the component

id?

string;

The element's unique identifier. See MDN.

role?

"region" | (string & {});

Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.

space?

PaddingSpaceProp;

The space between the children. You can see allowed tokens here.

spaceX?

PaddingSpacePropX;

Horizontal alignment for the children. You can see allowed tokens here.

spaceY?

PaddingSpacePropY;

Vertical alignment for the children. You can see allowed tokens here.

Building layouts

Learn how to build layouts.

Last update: 3 months ago