Storybook: Layouty

Každý řádek je jedna varianta nastavení layoutu

Storybook · demo

Stránka ukazuje paragraf Row se všemi volbami pole Layout settings: rozložení sloupců, poměr sloupců, téma, odsazení, minimální výšku, obrázek či video na pozadí a překryv.

Jeden sloupec (výchozí)

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.

Dva sloupce, poměr 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.

Dva sloupce, poměr 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.

Užší pravý sloupec.

Dva sloupce, poměr 9-3, obráceně na desktopu

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.

Tři sloupce

První sloupec.

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.

Druhý sloupec.

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.

Třetí sloupec.

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.

Téma light, odsazení 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.

Téma dark s obrázkem na pozadí, překryv dark, pozadí 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.

Téma black, min. výška lg, překryv 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.

Plná šířka, bez odsazení, pozadí 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.

Opakované pozadí (repeat), odsazení 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.

Minimální výška screen, překryv 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 na pozadí, překryv 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.

Dva sloupce s regionem top

Obsah v regionu top běží přes celou šířku nad sloupci.

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