Storybook: Layouts
This page demonstrate layouts with options
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.
Výchozí jeden sloupec
Default theme
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies, orci et malesuada ullamcorper, turpis magna cursus diam, in commodo libero odio vitae lectus. Nulla facilisi. Morbi feugiat erat vitae tellus suscipit, interdum iaculis risus fringilla. Morbi a tortor tincidunt, rhoncus est nec, maximus elit. Nulla erat mi, dictum ac nunc ac, blandit porta sapien. Praesent hendrerit tortor sit amet imperdiet interdum.
Maecenas euismod mi in egestas porta. Praesent porttitor arcu non urna pharetra, eu sagittis dui lobortis. Suspendisse venenatis varius ex. Duis tincidunt, sapien eu euismod fermentum, arcu dolor facilisis ipsum, a porttitor sem eros et metus. Pellentesque elementum ultricies justo a lobortis. Nulla non malesuada sem, eget feugiat leo.
Default two column layout (50:50)
Dark theme
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies, orci et malesuada ullamcorper, turpis magna cursus diam, in commodo libero odio vitae lectus. Nulla facilisi. Morbi feugiat erat vitae tellus suscipit, interdum iaculis risus fringilla. Morbi a tortor tincidunt, rhoncus est nec, maximus elit. Nulla erat mi, dictum ac nunc ac, blandit porta sapien. Praesent hendrerit tortor sit amet imperdiet interdum.
Maecenas euismod mi in egestas porta. Praesent porttitor arcu non urna pharetra, eu sagittis dui lobortis. Suspendisse venenatis varius ex. Duis tincidunt, sapien eu euismod fermentum, arcu dolor facilisis ipsum, a porttitor sem eros et metus. Pellentesque elementum ultricies justo a lobortis. Nulla non malesuada sem, eget feugiat leo.
This is H4 only for layout column
Proin aliquam urna sed eros accumsan vehicula. Donec commodo urna ut tortor ultrices, et porttitor mauris semper. Fusce hendrerit tempor elit, in vulputate ligula euismod eu. Integer in hendrerit mi. Aliquam mattis sagittis ligula ac fermentum. Maecenas fermentum, elit at dictum semper, ipsum turpis aliquet nibh, ut consectetur enim libero et nulla. Ut mollis porttitor lacus, at iaculis purus efficitur a. Ut sit amet placerat lectus. Mauris libero ex, rhoncus sit amet porttitor sed, iaculis eu quam. Fusce in mollis tortor. Sed vestibulum enim sit amet sapien tristique blandit. Pellentesque aliquet, erat sed elementum fermentum, nunc neque consectetur ante, eu porttitor magna tortor non mauris. Cras consequat lacus id dignissim ultricies. Fusce dictum rutrum velit, non pellentesque ex.
Changed two column layout, 66:33
Dark theme
This is H4 only for layout column
Proin aliquam urna sed eros accumsan vehicula. Donec commodo urna ut tortor ultrices, et porttitor mauris semper. Fusce hendrerit tempor elit, in vulputate ligula euismod eu. Integer in hendrerit mi. Aliquam mattis sagittis ligula ac fermentum. Maecenas fermentum, elit at dictum semper, ipsum turpis aliquet nibh, ut consectetur enim libero et nulla. Ut mollis porttitor lacus, at iaculis purus efficitur a. Ut sit amet placerat lectus. Mauris libero ex, rhoncus sit amet porttitor sed, iaculis eu quam. Fusce in mollis tortor. Sed vestibulum enim sit amet sapien tristique blandit. Pellentesque aliquet, erat sed elementum fermentum, nunc neque consectetur ante, eu porttitor magna tortor non mauris. Cras consequat lacus id dignissim ultricies. Fusce dictum rutrum velit, non pellentesque ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies, orci et malesuada ullamcorper, turpis magna cursus diam, in commodo libero odio vitae lectus. Nulla facilisi. Morbi feugiat erat vitae tellus suscipit, interdum iaculis risus fringilla. Morbi a tortor tincidunt, rhoncus est nec, maximus elit. Nulla erat mi, dictum ac nunc ac, blandit porta sapien. Praesent hendrerit tortor sit amet imperdiet interdum.
Three columns layout
Black theme
This is H4 only for layout column
Proin aliquam urna sed eros accumsan vehicula. Donec commodo urna ut tortor ultrices, et porttitor mauris semper. Fusce hendrerit tempor elit, in vulputate ligula euismod eu. Integer in hendrerit mi. Aliquam mattis sagittis ligula ac fermentum. Maecenas fermentum, elit at dictum semper, ipsum turpis aliquet nibh, ut consectetur enim libero et nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies, orci et malesuada ullamcorper, turpis magna cursus diam, in commodo libero odio vitae lectus. Nulla facilisi. Morbi feugiat erat vitae tellus suscipit, interdum iaculis risus fringilla. Morbi a tortor tincidunt, rhoncus est nec, maximus elit. Nulla erat mi, dictum ac nunc ac, blandit porta sapien. Praesent hendrerit tortor sit amet imperdiet interdum.
Nunc suscipit nibh sed tellus elementum lacinia. Aenean ultricies, ante vitae convallis tincidunt, nisl ipsum rutrum nunc, quis varius mi massa eu orci. Aenean dolor ipsum, egestas vitae mollis id, tempus eget magna. Phasellus placerat ultricies mauris, eu posuere purus.
Defaullt two columns layout
Columns are inversed
This column is first on mobile, but 2nd for desktop
Proin aliquam urna sed eros accumsan vehicula. Donec commodo urna ut tortor ultrices, et porttitor mauris semper. Fusce hendrerit tempor elit, in vulputate ligula euismod eu. Integer in hendrerit mi. Aliquam mattis sagittis ligula ac fermentum. Maecenas fermentum, elit at dictum semper, ipsum turpis aliquet nibh, ut consectetur enim libero et nulla. Ut mollis porttitor lacus, at iaculis purus efficitur a. Ut sit amet placerat lectus. Mauris libero ex, rhoncus sit amet porttitor sed, iaculis eu quam. Fusce in mollis tortor. Sed vestibulum enim sit amet sapien tristique blandit. Pellentesque aliquet, erat sed elementum fermentum, nunc neque consectetur ante, eu porttitor magna tortor non mauris. Cras consequat lacus id dignissim ultricies. Fusce dictum rutrum velit, non pellentesque ex.
This image is left on desktop, but after text on mobile
Row with image background
Spacing top: MD
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies, orci et malesuada ullamcorper, turpis magna cursus diam, in commodo libero odio vitae lectus. Nulla facilisi. Morbi feugiat erat vitae tellus suscipit, interdum iaculis risus fringilla. Morbi a tortor tincidunt, rhoncus est nec, maximus elit. Nulla erat mi, dictum ac nunc ac, blandit porta sapien. Praesent hendrerit tortor sit amet imperdiet interdum.
Maecenas euismod mi in egestas porta. Praesent porttitor arcu non urna pharetra, eu sagittis dui lobortis. Suspendisse venenatis varius ex. Duis tincidunt, sapien eu euismod fermentum, arcu dolor facilisis ipsum, a porttitor sem eros et metus. Pellentesque elementum ultricies justo a lobortis. Nulla non malesuada sem, eget feugiat leo.
One column layout
Full-width content - usefull for iFrames
Created: May 26, 2026 at 10:31 PM
Updated: May 27, 2026 at 03:16 PM