Storybook: Layouts
Every row is one layout-settings variant
Storybook · demo
This page shows the Row paragraph with every option of the Layout settings field: column layout, column ratio, theme, spacing, minimum height, background image or video and overlay.
One column (default)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Two columns, ratio 6-6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Two columns, ratio 8-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Narrower right column.
Two columns, ratio 9-3, reversed on desktop
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Three columns
First column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Second column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Third column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Theme light, spacing lg / lg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Theme dark with background image, overlay dark, background fixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Theme black, min height lg, overlay gradient-bottom-dark
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Full width, no spacing, background cover
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Repeated background (repeat), spacing sm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Min height screen, overlay gradient-top-dark
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Video background, overlay light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Two columns with the top region
Content in the top region spans the full width above the columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas tortor id nibh venenatis volutpat. Proin rutrum faucibus gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Created: September 5, 2026 at 09:40 AM
Updated: September 10, 2026 at 04:39 AM