Description
Layout.Card is a block section element showing the white box with rounded gray borders, adding spacing automatically.
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus. Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitae justo magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulum tempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravida neque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.
Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus. Fusce volutpat risus vitae lectus elementum, sed facilisis augue dignissim. Donec accumsan, purus commodo bibendum finibus, lacus leo lobortis lorem, maximus posuere mi justo et ipsum. Phasellus ut nulla eu mi placerat posuere at vel elit. Suspendisse facilisis mi eu sem eleifend, eu eleifend nulla mattis. Sed iaculis, erat at posuere scelerisque, sapien metus ullamcorper tortor, et interdum augue tortor id eros.
Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus. Fusce volutpat risus vitae lectus elementum, sed facilisis augue dignissim. Donec accumsan, purus commodo bibendum finibus, lacus leo lobortis lorem, maximus posuere mi justo et ipsum. Phasellus ut nulla eu mi placerat posuere at vel elit. Suspendisse facilisis mi eu sem eleifend, eu eleifend nulla mattis. Sed iaculis, erat at posuere scelerisque, sapien metus ullamcorper tortor, et interdum augue tortor id eros.
<Layout.Card>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursuspharetra elit in bibendum. Vivamus tincidunt eleifend tellus at tempus.Aliquam at felis rutrum, luctus dui at, bibendum ipsum. Quisque vitaejusto magna. Fusce hendrerit risus nec enim posuere commodo. Vestibulumtempus suscipit ullamcorper. Maecenas ac lobortis nibh, vitae gravidaneque. Fusce imperdiet rhoncus diam, in tincidunt dolor consectetur ut.<br /><br />Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitaemetus. Fusce volutpat risus vitae lectus elementum, sed facilisis auguedignissim. Donec accumsan, purus commodo bibendum finibus, lacus leolobortis lorem, maximus posuere mi justo et ipsum. Phasellus ut nulla eumi placerat posuere at vel elit. Suspendisse facilisis mi eu semeleifend, eu eleifend nulla mattis. Sed iaculis, erat at posuerescelerisque, sapien metus ullamcorper tortor, et interdum augue tortor ideros.</Layout.Card>
Properties
| Property | Type | Description |
|---|---|---|
stack | boolean | (optional) True to stack the sub components with lines between. |
direction | string | (optional) Direction of sub components. Can be: row or column. |
spacing | string or false | (optional) How to separate sub components. Can be: space, line or false for no space. |
children | React.Node | (optional) Contents. |