Component to seperate content from the main content.

The <Aside> is a responsive layout component. It should be used if you want to layout side content next to the main content. The side has a fixed width and the other one(the main content) can have a dynamic width.

If the screen becomes too small for the <Aside>, the content will automatically wrap.

It is important to note that the <Aside> must have exactly two children, where none is a <Fragment>.



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

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


spaceResponsiveStyleValue<string>noneThe space between the content and the aside.
side"left" | "right"leftThe side of the aside content.
sideWidthResponsiveStyleValue<string>noneThe side width of the aside content.
wrapNon-zero Percentage50%At which percent the content should wrap.
stretchbooleantrueStretches the aside.


Space between elements

The example shows how the space prop is to use. It defines the gap between the contents.

Aside on the right

A simple example on how to set the side prop.