Aside

The <Aside> component is a responsive layout element designed for displaying side content next to main content. It ensures the side content has a fixed width while the main content dynamically adjusts to fill the remaining space.

Usage

Use the <Aside> for building layouts were you need to have one dynamic main content with a fixed side content. On smaller screens, e.g. on mobile devices, the content is automatically shifted one below the other when 50% of the width is reached. You can also adjust this by setting the wrap property to a percentage value.

Important

The <Aside> must have exactly two children, where none is a <Fragment>.

The example shows a simple <Aside> component. If you have a look on the code tab you get to know how to set the side, sideWidth and space prop.

Through space you can define the gap between the contents. With sideWidth you define the width for the side content and with side you define the side on which the side content will appear.

Preview

Code

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 Aside 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

[
  ReactElement<any, string | JSXElementConstructor<any>>,
  ReactElement<any, string | JSXElementConstructor<any>>,
];

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.

side?

"left" | "right";

The side of the aside content.

Defaults to:

"left"

sideWidth?

string;

The width of the side content.

space?

GapSpaceProp;

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

Defaults to:

wrap?

NonZeroPercentage;

At what percentage of the content's width should the other content wrap beneath it

Defaults to:

50%

Alternative components

Grid: When things get more complex the <Grid> component is the right choice. It allows you to create complex layouts with multiple columns and rows.
Columns: You can position your content in one row with the <Columns> component. The component is used to create structured and flexible layouts that organize content efficiently.

Building layouts

Learn how to build layouts.

Last update: January 22, 2025

Usage

Important

The <Aside> must have exactly two children, where none is a <Fragment>.

The example shows a simple <Aside> component. If you have a look on the code tab you get to know how to set the side, sideWidth and space prop.

Through space you can define the gap between the contents. With sideWidth you define the width for the side content and with side you define the side on which the side content will appear.

Preview

Code

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 Aside 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

[
  ReactElement<any, string | JSXElementConstructor<any>>,
  ReactElement<any, string | JSXElementConstructor<any>>,
];

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.

side?

"left" | "right";

The side of the aside content.

Defaults to:

"left"

sideWidth?

string;

The width of the side content.

space?

GapSpaceProp;

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

Defaults to:

wrap?

NonZeroPercentage;

At what percentage of the content's width should the other content wrap beneath it

Defaults to:

50%

Alternative components

Grid: When things get more complex the <Grid> component is the right choice. It allows you to create complex layouts with multiple columns and rows.

Columns: You can position your content in one row with the <Columns> component. The component is used to create structured and flexible layouts that organize content efficiently.