Aside

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

Import


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

Props

Property	Type	Default	Description
`space`	`ResponsiveStyleValue<string>`	`none`	The space between the content and the aside.
`side`	`"left" \| "right"`	`left`	The side of the aside content.
`sideWidth`	`ResponsiveStyleValue<string>`	`none`	The side width of the aside content.
`wrap`	`Non-zero Percentage`	`50%`	At which percent the content should wrap.
`stretch`	`boolean`	`true`	Stretches the aside.

Examples

Space between elements

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

Preview

Code

Aside on the right

A simple example on how to set the side prop.

Preview

Code