Aside
Component to separate content from the main content.
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.
import { Aside } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => ( <Aside space={5} side="right" sideWidth="100px"> <Rectangle height="120px" /> <Rectangle height="120px" /> </Aside>);Props
Aside
Prop
Type
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.