Component that breaks out of a grid layout context.

<Breakout> is a layout component which lets you span the full row in a CSS grid context e.g. our <Container> component.

You need this component if you want to display something out of the context. It is also possible to put several components into the <Breakout>.

You can use alignX or alignY to place the items inside the <Breakout> element.



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

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


alignX"left" | "right" | "center"leftHorizontal alignment of the items inside the breakout element.
alignY"top" | "bottom" | "center"topVertical alignment of the items inside the breakout element.
heightstringnoneSet the height of the breakout element.


Vertical alignment

In this case the height prop is necessary, if you haven't set it, the alignY has no impact.

BREAKOUT with bottom alignment

Horizontal alignment

Example to show how the alignX prop is to set. Options are "left" | "center" | "right". The default value is left.

BREAKOUT with right aligned content

Breakout iframe

This example shows how to use an <iframe> within a <Breakout>.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.