Inline
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.
Import
import { Inline } from '@marigold/components';Props
| Property | Type | Default | Description |
|---|---|---|---|
space | ResponsiveStyleValue<string> | none | Space between the Inline elements. |
alignY | `top, center, bottom` | center | Vertical alignment of the items inside the inline element. |
alignX | `left, center, right` | left | Horizontal alignment of the items inside the inline element. |
Examples
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.
Check
this
out
Spacing
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.
Top
Lorem ipsum dolor sit amet.
Center
Lorem ipsum dolor sit amet.
Bottom
Lorem ipsum dolor sit amet.