VigO Logo

Velikosti

Sémantika v design systému zajišťuje konzistentní použití a interpretaci designových prvků napříč aplikacemi.

Gap

Gap je mezera mezi prvky v rozložení stránky, například mezi sloupci nebo řádky. Gap nastavuje, jak daleko od sebe budou jednotlivé položky, aniž by se muselo nastavovat odsazení na každém prvku zvlášť. Je to efektivní způsob, jak udržet pravidelné mezery mezi komponentami.

Název variableHodnota px
spacing/gap/none0
spacing/gap/2xs2
spacing/gap/xs4
spacing/gap/s8
spacing/gap/m16
spacing/gap/l24
spacing/gap/xl32
spacing/gap/2xl64

PaddingInline

Padding-inline je odsazení zleva a zprava, tedy vodorovně. Pokud nastavíte padding-inline, určíte tím, kolik místa bude mezi obsahem prvku a jeho okrajem vlevo a vpravo.

Název variableHodnota px
spacing/paddingInline/none0
spacing/paddingInline/2xs2
spacing/paddingInline/xs4
spacing/paddingInline/s8
spacing/paddingInline/m16
spacing/paddingInline/l24
spacing/paddingInline/xl32
spacing/paddingInline/2xl64

PaddingBlock

Padding-block je odsazení shora a zdola, tedy ve svislém směru. Nastavením padding-block určíte, kolik místa bude mezi obsahem prvku a jeho horním a spodním okrajem.

Název variableHodnota px
spacing/paddingBlock/none0
spacing/paddingBlock/2xs2
spacing/paddingBlock/xs4
spacing/paddingBlock/s8
spacing/paddingBlock/m16
spacing/paddingBlock/l24
spacing/paddingBlock/xl32
spacing/paddingBlock/2xl64

Canvas (pro desktop a mobil)

Výchozí hodnoty pro paddning a gap pro plochu (layout) stránky na desktop a mobilních zařízeních. Tyto hodnoty slouží pro UX design, na úrovni kódu se hodnoty proporčně dopočítávají automaticky.

Název variableHodnota px
spacing/canvas/desktop/paddingInline32
spacing/canvas/desktop/paddingBlock32
spacing/canvas/desktop/gap24
Název variableHodnota px
spacing/canvas/mobile/paddingInline8
spacing/canvas/mobile/paddingBlock16
spacing/canvas/mobile/gap16