Siirry sisältöön
Kela Design System KDS

14.5.0

CSS-apuluokat

Tältä sivulta löydät Kela Design Systemin tarjoamat apuluokat.

Yleistä

KDS:n komponentteja voi muokata kevyesti käyttökontekstin mukaan välittämällä niille KDS:n apuluokkia (tai omia CSS-luokkia). Tyypillisimpiä muokattavia asioita ovat komponenttien margin-, padding-, display-arvot, asemointi flexboxilla ja värit.

Voit lukea lisää CSS-apuluokkien käytöstä Tietoa apuluokista-sivulta.

breakpoint-merkinnällä ilmoitetut CSS-luokat ovat saatavilla myös responsiivina. Esimerkiksi sm:kds-block.

CSS-apuluokat

Aspect Ratio

CSS-luokkaArvo
kds-ratio--kds-aspect-ratio: 100%; position: relative; width: 100%;
kds-ratio--16x9--kds-aspect-ratio: calc(9 / 16 * 100%);

Border

Border Width

CSS-luokkaArvo
kds-border-0border-width: 0;
kds-borderborder-width: 1px;
kds-border-tborder-top-width: 1px;
kds-border-bborder-bottom-width: 1px;

Border Style

CSS-luokkaArvo
kds-border-noneborder-style: none;
kds-border-solidborder-style: solid;

Border Color

CSS-luokkaArvo
kds-border-defaultborder-color: var(--kds-base-border-color);
kds-border-primaryborder-color: var(--kds-color-primary);
kds-border-brand-primaryborder-color: var(--kds-color-brand-primary);
kds-border-successborder-color: var(--kds-color-success);
kds-border-warningborder-color: var(--kds-color-warning);
kds-border-dangerborder-color: var(--kds-color-danger);
kds-border-lightborder-color: var(--kds-color-light);
kds-border-darkborder-color: var(--kds-color-dark);

Border Radius

CSS-luokkaArvo
kds-rounded-smborder-radius: 0.25rem;
kds-rounded-mdborder-radius: 0.5rem;
kds-rounded-t-mdborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
kds-rounded-lgborder-radius: 1rem;
kds-rounded-xlborder-radius: 1.5rem;
kds-rounded-pillborder-radius: 10rem;
kds-rounded-circleborder-radius: 50%;

Box Shadow

CSS-luokkaArvo
kds-shadow-smbox-shadow: 0 2px 4px rgba(0,0,0,0.15)
kds-shadow-mdbox-shadow: 0 4px 8px rgba(0,0,0,0.15)
kds-shadow-lgbox-shadow: 0 8px 16px rgba(0,0,0,0.15)

Brand

CSS-luokkaArvo
kds-brand-borderborder-top: 4px solid var(--kds-color-brand-secondary);

Color

Color

CSS-luokkaArvo
kds-text-bodycolor: var(--kds-base-text-color);
kds-text-mutedcolor: var(--kds-base-text-color-muted);
kds-text-primarycolor: var(--kds-color-primary);
kds-text-brand-primarycolor: var(--kds-color-brand-primary);
kds-text-successcolor: var(--kds-color-success);
kds-text-warningcolor: var(--kds-color-warning);
kds-text-dangercolor: var(--kds-color-danger);
kds-text-lightcolor: var(--kds-color-light);
kds-text-darkcolor: var(--kds-color-dark);
kds-text-whitecolor: var(--kds-color-white);

Cursor

CSS-luokkaArvo
kds-cursor-pointercursor: pointer;

Background

CSS-luokkaArvo
kds-bg-whitebackground-color: var(--kds-color-white);
kds-bg-primarybackground-color: var(--kds-color-primary);
kds-bg-brand-primarybackground-color: var(--kds-color-brand-primary);
kds-bg-successbackground-color: var(--kds-color-success);
kds-bg-warningbackground-color: var(--kds-color-warning);
kds-bg-dangerbackground-color: var(--kds-color-danger);
kds-bg-lightbackground-color: var(--kds-color-light);
kds-bg-darkbackground-color: var(--kds-color-dark);

Display

CSS-luokkaArvo
kds-hiddenxssmmdlgxl2xl3xldisplay: none;
kds-blockxssmmdlgxl2xl3xldisplay: block;
kds-inline-blockxssmmdlgxl2xl3xldisplay: inline-block;
kds-inlinexssmmdlgxl2xl3xldisplay: inline;
kds-flexxssmmdlgxl2xl3xldisplay: flex;

Flex

Align Self

CSS-luokkaArvo
kds-self-startalign-self: flex-start;
kds-self-endalign-self: flex-end;
kds-self-centeralign-self: center;

Align Items

CSS-luokkaArvo
kds-items-startalign-items: flex-start;
kds-items-endalign-items: flex-end;
kds-items-centeralign-items: center;

Flex Direction

CSS-luokkaArvo
kds-flex-rowflex-direction: row;
kds-flex-row-reverseflex-direction: row-reverse;
kds-flex-colflex-direction: column;
kds-flex-col-reverseflex-direction: column-reverse;

Justify Content

CSS-luokkaArvo
kds-justify-startjustify-content: flex-start;
kds-justify-endjustify-content: flex-end;
kds-justify-centerjustify-content: center;
kds-justify-betweenjustify-content: space-between;
kds-justify-aroundjustify-content: space-around;
kds-justify-evenlyjustify-content: space-evenly;

Flex Grow

CSS-luokkaArvo
kds-growflex-grow: 1;
kds-grow-0flex-grow: 0;

Flex Shrink

CSS-luokkaArvo
kds-shrinkflex-shrink: 1;
kds-shrink-0flex-shrink: 0;

Flex Wrap

CSS-luokkaArvo
kds-flex-wrapflex-wrap: wrap;
kds-flex-nowrapflex-wrap: nowrap;

Focus

CSS-luokkaArvo
kds-no-focus-ring--kds-base-focus: none; --kds-base-focus-visible: none; outline: 0; box-shadow: none;
kds-focus-ring-inset-dark--kds-base-focus: var(--kds-focus-ring-inset-dark); --kds-base-focus-visible: var(--kds-focus-ring-inset-dark);
kds-focus-ring-inset-light--kds-base-focus: var(--kds-focus-ring-inset-light); --kds-base-focus-visible: var(--kds-focus-ring-inset-light);
kds-focus-ring-offset-dark--kds-base-focus: var(--kds-focus-ring-offset-dark); --kds-base-focus-visible: var(--kds-focus-ring-offset-dark);
kds-focus-ring-offset-light--kds-base-focus: var(--kds-focus-ring-offset-light); --kds-base-focus-visible: var(--kds-focus-ring-offset-light);
focus-visible:kds-focus-ring-inset-dark--kds-base-focus: none; --kds-base-focus-visible: var(--kds-focus-ring-inset-dark);
focus-visible:kds-focus-ring-inset-light--kds-base-focus: none; --kds-base-focus-visible: var(--kds-focus-ring-inset-light);
focus-visible:kds-focus-ring-offset-dark--kds-base-focus: none; --kds-base-focus-visible: var(--kds-focus-ring-offset-dark);
focus-visible:kds-focus-ring-offset-light--kds-base-focus: none; --kds-base-focus-visible: var(--kds-focus-ring-offset-light);

Grid Gap

CSS-luokkaArvo
kds-gx-0smmdlgxl2xl3xl--kds-gap-x: 0rem;
kds-gx-2smmdlgxl2xl3xl--kds-gap-x: 0.5rem;
kds-gx-4smmdlgxl2xl3xl--kds-gap-x: 1rem;
kds-gx-6smmdlgxl2xl3xl--kds-gap-x: 1.5rem;
kds-gx-8smmdlgxl2xl3xl--kds-gap-x: 2rem;
kds-gy-0smmdlgxl2xl3xl--kds-gap-y: 0rem;
kds-gy-2smmdlgxl2xl3xl--kds-gap-y: 0.5rem;
kds-gy-4smmdlgxl2xl3xl--kds-gap-y: 1rem;
kds-gy-6smmdlgxl2xl3xl--kds-gap-y: 1.5rem;
kds-gy-8smmdlgxl2xl3xl--kds-gap-y: 2rem;

Overflow

CSS-luokkaArvo
kds-overflow-hiddenoverflow: hidden;
kds-overflow-autooverflow: auto;

Position

CSS-luokkaArvo
kds-staticposition: static;
kds-fixedposition: fixed;
kds-absoluteposition: absolute;
kds-relativeposition: relative;
kds-stickyposition: sticky;

Screen Readers

CSS-luokkaArvo
kds-sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
kds-sr-focusableposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;

Spacing

Height

CSS-luokkaArvo
kds-h-0height: 0;
kds-h-1/4height: 25%;
kds-h-2/4height: 50%;
kds-h-3/4height: 75%;
kds-h-autoheight: auto;
kds-h-fullheight: 100%;
kds-h-screenheight: 100vh;

Width

CSS-luokkaArvo
kds-w-0width: 0;
kds-w-2width: 0.5rem;
kds-w-4width: 1rem;
kds-w-6width: 1.5rem;
kds-w-8width: 2rem;
kds-w-10width: 2.5rem;
kds-w-12width: 3rem;
kds-w-14width: 3.5rem;
kds-w-16width: 4rem;
kds-w-18width: 4.5rem;
kds-w-20width: 5rem;
kds-w-24width: 6rem;
kds-w-28width: 7rem;
kds-w-32width: 8rem;
kds-w-autowidth: auto;
kds-w-1/4width: 25%;
kds-w-2/4width: 50%;
kds-w-3/4width: 75%;
kds-w-fullwidth: 100%;
kds-w-screenwidth: 100vw;

Max Width

CSS-luokkaArvo
kds-max-w-screen-smmax-width: 34rem
kds-max-w-screen-mdmax-width: 45rem
kds-max-w-screen-lgmax-width: 60rem
kds-max-w-screen-xlmax-width: 72rem
kds-max-w-screen-2xlmax-width: 83rem
kds-max-w-screen-3xlmax-width: 96rem

Margin

CSS-luokkaArvo
kds-m-0smmdmargin: 0;
kds-m-1margin: 0.25rem;
kds-m-2smmdmargin: 0.5rem;
kds-m-3margin: 0.75rem;
kds-m-4smmdmargin: 1rem;
kds-m-5margin: 1.25rem;
kds-m-6smmdmargin: 1.5rem;
kds-m-7margin: 1.75rem;
kds-m-8margin: 2rem;
kds-m-9margin: 2.25rem;
kds-m-10margin: 2.5rem;
kds-m-12margin: 3rem;
kds-m-14margin: 3.5rem;
kds-m-16margin: 4rem;
kds-m-18margin: 4.5rem;
kds-m-20margin: 5rem;
kds-m-24margin: 6rem;
kds-m-28margin: 7rem;
kds-m-32margin: 8rem;
kds-m-pxmargin: 1px;
kds-m-automargin: auto;
kds-mx-0smmdmargin-left: 0; margin-right: 0;
kds-mx-1margin-left: 0.25rem; margin-right: 0.25rem;
kds-mx-2smmdmargin-left: 0.5rem; margin-right: 0.5rem;
kds-mx-3margin-left: 0.75rem; margin-right: 0.75rem;
kds-mx-4smmdmargin-left: 1rem; margin-right: 1rem;
kds-mx-5margin-left: 1.25rem; margin-right: 1.25rem;
kds-mx-6smmdmargin-left: 1.5rem; margin-right: 1.5rem;
kds-mx-7margin-left: 1.75rem; margin-right: 1.75rem;
kds-mx-8margin-left: 2rem; margin-right: 2rem;
kds-mx-9margin-left: 2.25rem; margin-right: 2.25rem;
kds-mx-10margin-left: 2.5rem; margin-right: 2.5rem;
kds-mx-12margin-left: 3rem; margin-right: 3rem;
kds-mx-14margin-left: 3.5rem; margin-right: 3.5rem;
kds-mx-16margin-left: 4rem; margin-right: 4rem;
kds-mx-18margin-left: 4.5rem; margin-right: 4.5rem;
kds-mx-20margin-left: 5rem; margin-right: 5rem;
kds-mx-24margin-left: 6rem; margin-right: 6rem;
kds-mx-28margin-left: 7rem; margin-right: 7rem;
kds-mx-32margin-left: 8rem; margin-right: 8rem;
kds-mx-pxmargin-left: 1px; margin-right: 1px;
kds-mx-automargin-left: auto; margin-right: auto;
kds-my-0smmdmargin-top: 0; margin-bottom: 0;
kds-my-1margin-top: 0.25rem; margin-bottom: 0.25rem;
kds-my-2smmdmargin-top: 0.5rem; margin-bottom: 0.5rem;
kds-my-3margin-top: 0.75rem; margin-bottom: 0.75rem;
kds-my-4smmdmargin-top: 1rem; margin-bottom: 1rem;
kds-my-5margin-top: 1.25rem; margin-bottom: 1.25rem;
kds-my-6smmdmargin-top: 1.5rem; margin-bottom: 1.5rem;
kds-my-7margin-top: 1.75rem; margin-bottom: 1.75rem;
kds-my-8margin-top: 2rem; margin-bottom: 2rem;
kds-my-9margin-top: 2.25rem; margin-bottom: 2.25rem;
kds-my-10margin-top: 2.5rem; margin-bottom: 2.5rem;
kds-my-12margin-top: 3rem; margin-bottom: 3rem;
kds-my-14margin-top: 3.5rem; margin-bottom: 3.5rem;
kds-my-16margin-top: 4rem; margin-bottom: 4rem;
kds-my-18margin-top: 4.5rem; margin-bottom: 4.5rem;
kds-my-20margin-top: 5rem; margin-bottom: 5rem;
kds-my-24margin-top: 6rem; margin-bottom: 6rem;
kds-my-28margin-top: 7rem; margin-bottom: 7rem;
kds-my-32margin-top: 8rem; margin-bottom: 8rem;
kds-my-pxmargin-top: 1px; margin-bottom: 1px;
kds-my-automargin-top: auto; margin-bottom: auto;
kds-ml-0smmdmargin-left: 0;
kds-ml-1margin-left: 0.25rem;
kds-ml-2smmdmargin-left: 0.5rem;
kds-ml-3margin-left: 0.75rem;
kds-ml-4smmdmargin-left: 1rem;
kds-ml-5margin-left: 1.25rem;
kds-ml-6smmdmargin-left: 1.5rem;
kds-ml-7margin-left: 1.75rem;
kds-ml-8margin-left: 2rem;
kds-ml-9margin-left: 2.25rem;
kds-ml-10margin-left: 2.5rem;
kds-ml-12margin-left: 3rem;
kds-ml-14margin-left: 3.5rem;
kds-ml-16margin-left: 4rem;
kds-ml-18margin-left: 4.5rem;
kds-ml-20margin-left: 5rem;
kds-ml-24margin-left: 6rem;
kds-ml-28margin-left: 7rem;
kds-ml-32margin-left: 8rem;
kds-ml-pxmargin-left: 1px;
kds-ml-automargin-left: auto;
kds-mr-0smmdmargin-right: 0;
kds-mr-1margin-right: 0.25rem;
kds-mr-2smmdmargin-right: 0.5rem;
kds-mr-3margin-right: 0.75rem;
kds-mr-4smmdmargin-right: 1rem;
kds-mr-5margin-right: 1.25rem;
kds-mr-6smmdmargin-right: 1.5rem;
kds-mr-7margin-right: 1.75rem;
kds-mr-8margin-right: 2rem;
kds-mr-9margin-right: 2.25rem;
kds-mr-10margin-right: 2.5rem;
kds-mr-12margin-right: 3rem;
kds-mr-14margin-right: 3.5rem;
kds-mr-16margin-right: 4rem;
kds-mr-18margin-right: 4.5rem;
kds-mr-20margin-right: 5rem;
kds-mr-24margin-right: 6rem;
kds-mr-28margin-right: 7rem;
kds-mr-32margin-right: 8rem;
kds-mr-pxmargin-right: 1px;
kds-mr-automargin-right: auto;
kds-mt-0smmdmargin-top: 0;
kds-mt-1margin-top: 0.25rem;
kds-mt-2smmdmargin-top: 0.5rem;
kds-mt-3margin-top: 0.75rem;
kds-mt-4smmdmargin-top: 1rem;
kds-mt-5margin-top: 1.25rem;
kds-mt-6smmdmargin-top: 1.5rem;
kds-mt-7margin-top: 1.75rem;
kds-mt-8margin-top: 2rem;
kds-mt-9margin-top: 2.25rem;
kds-mt-10margin-top: 2.5rem;
kds-mt-12margin-top: 3rem;
kds-mt-14margin-top: 3.5rem;
kds-mt-16margin-top: 4rem;
kds-mt-18margin-top: 4.5rem;
kds-mt-20margin-top: 5rem;
kds-mt-24margin-top: 6rem;
kds-mt-28margin-top: 7rem;
kds-mt-32margin-top: 8rem;
kds-mt-pxmargin-top: 1px;
kds-mt-automargin-top: auto;
kds-mb-0smmdmargin-bottom: 0;
kds-mb-1margin-bottom: 0.25rem;
kds-mb-2smmdmargin-bottom: 0.5rem;
kds-mb-3margin-bottom: 0.75rem;
kds-mb-4smmdmargin-bottom: 1rem;
kds-mb-5margin-bottom: 1.25rem;
kds-mb-6smmdmargin-bottom: 1.5rem;
kds-mb-7margin-bottom: 1.75rem;
kds-mb-8margin-bottom: 2rem;
kds-mb-9margin-bottom: 2.25rem;
kds-mb-10margin-bottom: 2.5rem;
kds-mb-12margin-bottom: 3rem;
kds-mb-14margin-bottom: 3.5rem;
kds-mb-16margin-bottom: 4rem;
kds-mb-18margin-bottom: 4.5rem;
kds-mb-20margin-bottom: 5rem;
kds-mb-24margin-bottom: 6rem;
kds-mb-28margin-bottom: 7rem;
kds-mb-32margin-bottom: 8rem;
kds-mb-pxmargin-bottom: 1px;
kds-mb-automargin-bottom: auto;
kds--m-pxmargin: -1px;
kds--m-1margin: -0.25rem;
kds--m-2smmdmargin: -0.5rem;
kds--m-3margin: -0.75rem;
kds--m-4smmdmargin: -1rem;
kds--m-5margin: -1.25rem;
kds--m-6smmdmargin: -1.5rem;
kds--m-7margin: -1.75rem;
kds--m-8margin: -2rem;
kds--mx-pxmargin-left: -1px; margin-right: -1px;
kds--mx-1margin-left: -0.25rem; margin-right: -0.25rem;
kds--mx-2smmdmargin-left: -0.5rem; margin-right: -0.5rem;
kds--mx-3margin-left: -0.75rem; margin-right: -0.75rem;
kds--mx-4smmdmargin-left: -1rem; margin-right: -1rem;
kds--mx-5margin-left: -1.25rem; margin-right: -1.25rem;
kds--mx-6smmdmargin-left: -1.5rem; margin-right: -1.5rem;
kds--mx-7margin-left: -1.75rem; margin-right: -1.75rem;
kds--mx-8margin-left: -2rem; margin-right: -2rem;
kds--my-pxmargin-top: -1px; margin-bottom: -1px;
kds--my-1margin-top: -0.25rem; margin-bottom: -0.25rem;
kds--my-2smmdmargin-top: -0.5rem; margin-bottom: -0.5rem;
kds--my-3margin-top: -0.75rem; margin-bottom: -0.75rem;
kds--my-4smmdmargin-top: -1rem; margin-bottom: -1rem;
kds--my-5margin-top: -1.25rem; margin-bottom: -1.25rem;
kds--my-6smmdmargin-top: -1.5rem; margin-bottom: -1.5rem;
kds--my-7margin-top: -1.75rem; margin-bottom: -1.75rem;
kds--my-8margin-top: -2rem; margin-bottom: -2rem;
kds--ml-pxmargin-left: -1px;
kds--ml-1margin-left: -0.25rem;
kds--ml-2smmdmargin-left: -0.5rem;
kds--ml-3margin-left: -0.75rem;
kds--ml-4smmdmargin-left: -1rem;
kds--ml-5margin-left: -1.25rem;
kds--ml-6smmdmargin-left: -1.5rem;
kds--ml-7margin-left: -1.75rem;
kds--ml-8margin-left: -2rem;
kds--mr-pxmargin-right: -1px;
kds--mr-1margin-right: -0.25rem;
kds--mr-2smmdmargin-right: -0.5rem;
kds--mr-3margin-right: -0.75rem;
kds--mr-4smmdmargin-right: -1rem;
kds--mr-5margin-right: -1.25rem;
kds--mr-6smmdmargin-right: -1.5rem;
kds--mr-7margin-right: -1.75rem;
kds--mr-8margin-right: -2rem;
kds--mt-pxmargin-top: -1px;
kds--mt-1margin-top: -0.25rem;
kds--mt-2smmdmargin-top: -0.5rem;
kds--mt-3margin-top: -0.75rem;
kds--mt-4smmdmargin-top: -1rem;
kds--mt-5margin-top: -1.25rem;
kds--mt-6smmdmargin-top: -1.5rem;
kds--mt-7margin-top: -1.75rem;
kds--mt-8margin-top: -2rem;
kds--mb-pxmargin-bottom: -1px;
kds--mb-1margin-bottom: -0.25rem;
kds--mb-2smmdmargin-bottom: -0.5rem;
kds--mb-3margin-bottom: -0.75rem;
kds--mb-4smmdmargin-bottom: -1rem;
kds--mb-5margin-bottom: -1.25rem;
kds--mb-6smmdmargin-bottom: -1.5rem;
kds--mb-7margin-bottom: -1.75rem;
kds--mb-8margin-bottom: -2rem;

Padding

CSS-luokkaArvo
kds-p-0smmdpadding: 0;
kds-p-1padding: 0.25rem;
kds-p-2smmdpadding: 0.5rem;
kds-p-3padding: 0.75rem;
kds-p-4smmdpadding: 1rem;
kds-p-5padding: 1.25rem;
kds-p-6smmdpadding: 1.5rem;
kds-p-7padding: 1.75rem;
kds-p-8padding: 2rem;
kds-p-9padding: 2.25rem;
kds-p-10padding: 2.5rem;
kds-p-12padding: 3rem;
kds-p-14padding: 3.5rem;
kds-p-16padding: 4rem;
kds-p-18padding: 4.5rem;
kds-p-20padding: 5rem;
kds-p-24padding: 6rem;
kds-p-28padding: 7rem;
kds-p-32padding: 8rem;
kds-p-pxpadding: 1px;
kds-px-0smmdpadding-left: 0; padding-right: 0;
kds-px-1padding-left: 0.25rem; padding-right: 0.25rem;
kds-px-2smmdpadding-left: 0.5rem; padding-right: 0.5rem;
kds-px-3padding-left: 0.75rem; padding-right: 0.75rem;
kds-px-4smmdpadding-left: 1rem; padding-right: 1rem;
kds-px-5padding-left: 1.25rem; padding-right: 1.25rem;
kds-px-6smmdpadding-left: 1.5rem; padding-right: 1.5rem;
kds-px-7padding-left: 1.75rem; padding-right: 1.75rem;
kds-px-8padding-left: 2rem; padding-right: 2rem;
kds-px-9padding-left: 2.25rem; padding-right: 2.25rem;
kds-px-10padding-left: 2.5rem; padding-right: 2.5rem;
kds-px-12padding-left: 3rem; padding-right: 3rem;
kds-px-14padding-left: 3.5rem; padding-right: 3.5rem;
kds-px-16padding-left: 4rem; padding-right: 4rem;
kds-px-18padding-left: 4.5rem; padding-right: 4.5rem;
kds-px-20padding-left: 5rem; padding-right: 5rem;
kds-px-24padding-left: 6rem; padding-right: 6rem;
kds-px-28padding-left: 7rem; padding-right: 7rem;
kds-px-32padding-left: 8rem; padding-right: 8rem;
kds-px-pxpadding-left: 1px; padding-right: 1px;
kds-py-0smmdpadding-top: 0; padding-bottom: 0;
kds-py-1padding-top: 0.25rem; padding-bottom: 0.25rem;
kds-py-2smmdpadding-top: 0.5rem; padding-bottom: 0.5rem;
kds-py-3padding-top: 0.75rem; padding-bottom: 0.75rem;
kds-py-4smmdpadding-top: 1rem; padding-bottom: 1rem;
kds-py-5padding-top: 1.25rem; padding-bottom: 1.25rem;
kds-py-6smmdpadding-top: 1.5rem; padding-bottom: 1.5rem;
kds-py-7padding-top: 1.75rem; padding-bottom: 1.75rem;
kds-py-8padding-top: 2rem; padding-bottom: 2rem;
kds-py-9padding-top: 2.25rem; padding-bottom: 2.25rem;
kds-py-10padding-top: 2.5rem; padding-bottom: 2.5rem;
kds-py-12padding-top: 3rem; padding-bottom: 3rem;
kds-py-14padding-top: 3.5rem; padding-bottom: 3.5rem;
kds-py-16padding-top: 4rem; padding-bottom: 4rem;
kds-py-18padding-top: 4.5rem; padding-bottom: 4.5rem;
kds-py-20padding-top: 5rem; padding-bottom: 5rem;
kds-py-24padding-top: 6rem; padding-bottom: 6rem;
kds-py-28padding-top: 7rem; padding-bottom: 7rem;
kds-py-32padding-top: 8rem; padding-bottom: 8rem;
kds-py-pxpadding-top: 1px; padding-bottom: 1px;
kds-pl-0smmdpadding-left: 0;
kds-pl-1padding-left: 0.25rem;
kds-pl-2smmdpadding-left: 0.5rem;
kds-pl-3padding-left: 0.75rem;
kds-pl-4smmdpadding-left: 1rem;
kds-pl-5padding-left: 1.25rem;
kds-pl-6smmdpadding-left: 1.5rem;
kds-pl-7padding-left: 1.75rem;
kds-pl-8padding-left: 2rem;
kds-pl-9padding-left: 2.25rem;
kds-pl-10padding-left: 2.5rem;
kds-pl-12padding-left: 3rem;
kds-pl-14padding-left: 3.5rem;
kds-pl-16padding-left: 4rem;
kds-pl-18padding-left: 4.5rem;
kds-pl-20padding-left: 5rem;
kds-pl-24padding-left: 6rem;
kds-pl-28padding-left: 7rem;
kds-pl-32padding-left: 8rem;
kds-pl-pxpadding-left: 1px;
kds-pr-0smmdpadding-right: 0;
kds-pr-1padding-right: 0.25rem;
kds-pr-2smmdpadding-right: 0.5rem;
kds-pr-3padding-right: 0.75rem;
kds-pr-4smmdpadding-right: 1rem;
kds-pr-5padding-right: 1.25rem;
kds-pr-6smmdpadding-right: 1.5rem;
kds-pr-7padding-right: 1.75rem;
kds-pr-8padding-right: 2rem;
kds-pr-9padding-right: 2.25rem;
kds-pr-10padding-right: 2.5rem;
kds-pr-12padding-right: 3rem;
kds-pr-14padding-right: 3.5rem;
kds-pr-16padding-right: 4rem;
kds-pr-18padding-right: 4.5rem;
kds-pr-20padding-right: 5rem;
kds-pr-24padding-right: 6rem;
kds-pr-28padding-right: 7rem;
kds-pr-32padding-right: 8rem;
kds-pr-pxpadding-right: 1px;
kds-pt-0smmdpadding-top: 0;
kds-pt-1padding-top: 0.25rem;
kds-pt-2smmdpadding-top: 0.5rem;
kds-pt-3padding-top: 0.75rem;
kds-pt-4smmdpadding-top: 1rem;
kds-pt-5padding-top: 1.25rem;
kds-pt-6smmdpadding-top: 1.5rem;
kds-pt-7padding-top: 1.75rem;
kds-pt-8padding-top: 2rem;
kds-pt-9padding-top: 2.25rem;
kds-pt-10padding-top: 2.5rem;
kds-pt-12padding-top: 3rem;
kds-pt-14padding-top: 3.5rem;
kds-pt-16padding-top: 4rem;
kds-pt-18padding-top: 4.5rem;
kds-pt-20padding-top: 5rem;
kds-pt-24padding-top: 6rem;
kds-pt-28padding-top: 7rem;
kds-pt-32padding-top: 8rem;
kds-pt-pxpadding-top: 1px;
kds-pb-0smmdpadding-bottom: 0;
kds-pb-1padding-bottom: 0.25rem;
kds-pb-2smmdpadding-bottom: 0.5rem;
kds-pb-3padding-bottom: 0.75rem;
kds-pb-4smmdpadding-bottom: 1rem;
kds-pb-5padding-bottom: 1.25rem;
kds-pb-6smmdpadding-bottom: 1.5rem;
kds-pb-7padding-bottom: 1.75rem;
kds-pb-8padding-bottom: 2rem;
kds-pb-9padding-bottom: 2.25rem;
kds-pb-10padding-bottom: 2.5rem;
kds-pb-12padding-bottom: 3rem;
kds-pb-14padding-bottom: 3.5rem;
kds-pb-16padding-bottom: 4rem;
kds-pb-18padding-bottom: 4.5rem;
kds-pb-20padding-bottom: 5rem;
kds-pb-24padding-bottom: 6rem;
kds-pb-28padding-bottom: 7rem;
kds-pb-32padding-bottom: 8rem;
kds-pb-pxpadding-bottom: 1px;

Text

Text Align

CSS-luokkaArvo
kds-text-lefttext-align: left;
kds-text-centertext-align: center;
kds-text-righttext-align: right;
kds-text-justifytext-align: justify;
kds-text-starttext-align: start;
kds-text-endtext-align: end;

Font Family

CSS-luokkaArvo
kds-font-headingfont-family: var(--kds-base-font-family-heading);
kds-font-bodyfont-family: var(--kds-base-font-family-body);

Font Weight

CSS-luokkaArvo
kds-font-normalfont-weight: var(--kds-font-weight-normal);
kds-font-semiboldfont-weight: var(--kds-font-weight-semibold);
kds-font-boldfont-weight: var(--kds-font-weight-bold);

Line Height

CSS-luokkaArvo
kds-leading-resetline-height: var(--kds-line-height-reset);
kds-leading-smline-height: var(--kds-line-height-sm);
kds-leading-mdline-height: var(--kds-line-height-md);
kds-leading-lgline-height: var(--kds-line-height-lg);

Letter Spacing

CSS-luokkaArvo
kds-tracking-smletter-spacing: var(--kds-letter-spacing-sm);
kds-tracking-mdletter-spacing: var(--kds-letter-spacing-md);
kds-tracking-lgletter-spacing: var(--kds-letter-spacing-lg);

White Space

CSS-luokkaArvo
kds-whitespace-nowrapwhite-space: nowrap;

Text Overflow

CSS-luokkaArvo
kds-truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Font Size

CSS-luokkaArvo
kds-text-smfont-size: var(--kds-font-size-sm); line-height: var(--kds-line-height-lg);
kds-text-basefont-size: var(--kds-font-size-base); line-height: var(--kds-line-height-lg);
kds-text-lgfont-size: var(--kds-font-size-lg); line-height: var(--kds-line-height-lg);
kds-text-xlfont-size: var(--kds-font-size-xl); line-height: var(--kds-line-height-lg);
kds-text-2xlfont-size: var(--kds-font-size-2xl); line-height: var(--kds-line-height-md);
kds-text-3xlfont-size: var(--kds-font-size-3xl); line-height: var(--kds-line-height-md);
kds-text-4xlfont-size: var(--kds-font-size-4xl); line-height: var(--kds-line-height-md);
kds-text-5xlfont-size: var(--kds-font-size-5xl); line-height: var(--kds-line-height-md);
kds-text-6xlfont-size: var(--kds-font-size-6xl); line-height: var(--kds-line-height-md);
kds-text-7xlfont-size: var(--kds-font-size-7xl); line-height: var(--kds-line-height-md);
kds-text-8xlfont-size: var(--kds-font-size-8xl); line-height: var(--kds-line-height-md);
kds-text-9xlfont-size: var(--kds-font-size-9xl); line-height: var(--kds-line-height-md);

Transform

CSS-luokkaArvo
kds-uppercasetext-transform: uppercase
kds-lowercasetext-transform: lowercase
kds-capitalizetext-transform: capitalize
kds-normal-casetext-transform: none

Visibility

CSS-luokkaArvo
kds-visiblevisibility: visible;
kds-invisiblevisibility: hidden;

Z-index

CSS-luokkaArvo
kds-z-deepz-index: var(--kds-z-deep);
kds-z-defaultz-index: var(--kds-z-default);
kds-z-dropdownz-index: var(--kds-z-dropdown);
kds-z-headerz-index: var(--kds-z-header);
kds-z-sidebarz-index: var(--kds-z-sidebar);
kds-z-toastz-index: var(--kds-z-toast);
kds-z-modal-backdropz-index: var(--kds-z-modal-backdrop);
kds-z-modalz-index: var(--kds-z-modal);
kds-z-tooltipz-index: var(--kds-z-tooltip);
kds-z-infinitez-index: var(--kds-z-infinite);