Skip to main content

Sizes

Tokens

Size 4 points

VariablePropertyValue
--ob-size-unit1rem10px
--ob-size-00px0px
--ob-size-px1px1px
--ob-size-0-5calc( var(--ob-size-unit) * 0.2 )2px
--ob-size-1calc( var(--ob-size-unit) * 0.4 )4px
--ob-size-1-5calc( var(--ob-size-unit) * 0.6 )6px
--ob-size-2calc( var(--ob-size-unit) * 0.8 )8px
--ob-size-2-5calc( var(--ob-size-unit) * 1 )10px
--ob-size-3calc( var(--ob-size-unit) * 1.2 )12px
--ob-size-3-5calc( var(--ob-size-unit) * 1.4 )14px
--ob-size-4calc( var(--ob-size-unit) * 1.6 )16px
--ob-size-5calc( var(--ob-size-unit) * 2 )20px
--ob-size-6calc( var(--ob-size-unit) * 2.4 )24px
--ob-size-7calc( var(--ob-size-unit) * 2.8 )28px
--ob-size-8calc( var(--ob-size-unit) * 3.2 )32px
--ob-size-9calc( var(--ob-size-unit) * 3.6 )36px
--ob-size-10calc( var(--ob-size-unit) * 4 )40px
--ob-size-11calc( var(--ob-size-unit) * 4.4 )44px
--ob-size-12calc( var(--ob-size-unit) * 4.8 )48px
--ob-size-14calc( var(--ob-size-unit) * 5.6 )56px
--ob-size-16calc( var(--ob-size-unit) * 6.4 )64px
--ob-size-20calc( var(--ob-size-unit) * 8 )80px
--ob-size-24calc( var(--ob-size-unit) * 9.6 )96px
--ob-size-28calc( var(--ob-size-unit) * 11.2 )112px
--ob-size-32calc( var(--ob-size-unit) * 12.8 )128px
--ob-size-36calc( var(--ob-size-unit) * 14.4 )144px
--ob-size-40calc( var(--ob-size-unit) * 16 )160px
--ob-size-44calc( var(--ob-size-unit) * 17.6 )179px
--ob-size-48calc( var(--ob-size-unit) * 19.2 )192px
--ob-size-52calc( var(--ob-size-unit) * 20.8 )208px
--ob-size-56calc( var(--ob-size-unit) * 22.4 )224px
--ob-size-60calc( var(--ob-size-unit) * 24 )240px
--ob-size-64calc( var(--ob-size-unit) * 25.6 )256px
--ob-size-72calc( var(--ob-size-unit) * 28.8 )288px
--ob-size-80calc( var(--ob-size-unit) * 32 )320px
--ob-size-96calc( var(--ob-size-unit) * 38.4 )384px

Size Screen

VariablePropertyValue
--ob-size-screen-lgcalc(var(--ob-breakpoints-lg) + 1px)992px
--ob-size-screen-mdcalc(var(--ob-breakpoints-md) + 1px)768px
--ob-size-screen-smcalc(var(--ob-breakpoints-sm) + 1px)480px
--ob-size-screen-xs320px320px