Component to inline elements with spaces.

The <Inline> is a responsive layout component. It's inlining element with space between each element. This component uses the spaces from the given theme or a responsive string.



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

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


spaceResponsiveStyleValue<string>noneSpace between the Inline elements.
alignY`top, center, bottom` centerVertical alignment of the items inside the inline element.
alignX`left, center, right` leftHorizontal alignment of the items inside the inline element.


More than two elements

If you have more than two elements you can use the <Inline> component. The elements are arranged according to the space required.





The <Inline> component can be used to add spacing between elements. For this you need the props space and you can then place all components inside the <Inline> element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a porttitor massa ex ut quam.

Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. Vestibulum malesuada ante eu velit malesuada, nec ultricies sapien finibus. Aenean rutrum in sem a ullamcorper. Integer ut euismod urna. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Nested Inline

<Inline> components can also have themselves as component. This can be used to add more spacing within the elements.

Block #1

Lorem ipsum dolor sit amet.

Bock #2

Lorem ipsum dolor sit amet.

Different alignment

If elements need to be positioned differently on their x and y axis, this can be done with the <Inline> component. In this case one of the following props is given. Either alignX or alignY.


Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet.