Skip to main content

Utility-klasser

Utility-klasser er hjelpeklasser i CSS, designet for å enkelt kunne legge vanlige styling-properties til elementer ved behov. Hver klasse har sitt eget separate formål og består av én enkelt CSS-property, eller et mindre sett med properties for å oppnå en spesifikk effekt. Flere klasser kan brukes samtidig for å bygge opp komplette elementer. Komponentene i Indeks er i stor grad bygget med utility-klasser.

Mange av klassene refererer til design tokens som er synket mellom Figma og koden i GitHub. I CSS er disse verdiene tilgjengelige i form av CSS-variabler, som i sin tur brukes av utility-klassene.

På denne siden finner du en utfyllende liste over tilgjengelige utility-klasser i Indeks.

Eksempel​

Eksempler på egenskaper som kan legges til med utility-klasser er spacing (margin, padding, gap), flex-verdier og bakgrunnsfarger. I eksempelet nedenfor lager vi en flex-container med standard (main) bakgrunn, medium padding og ekstra stor margin-top.

<div class="ix-flex ix-color-surface-main-default ix-p-md ix-mt-xl">
    ...
</div>

Spacing​

Spacing i Indeks er basert på en skala med verdier regnet ut fra en baseverdi. Baseverdien er responsiv og varierer mellom 16px og 18px basert på skjermstørrelse. Alle spacing-verdier beregnes som multipler av baseverdien, og kan overstyres av density-modifierne.

margin, padding og gap bruker variablene fra skalaen, og har tilsvarende klassenavn. For eksempel gir klassen .ix-p-2xs padding lik verdien av --ix-spacing-2xs.

Padding​

CSS-klasseVerdi
.ix-p-0padding: 0;
.ix-p-2xspadding: var(--ix-spacing-2xs);
.ix-p-xspadding: var(--ix-spacing-xs);
.ix-p-smpadding: var(--ix-spacing-sm);
.ix-p-mdpadding: var(--ix-spacing-md);
.ix-p-lgpadding: var(--ix-spacing-lg);
.ix-p-xlpadding: var(--ix-spacing-xl);
.ix-p-2xlpadding: var(--ix-spacing-2xl);
.ix-p-3xlpadding: var(--ix-spacing-3xl);
.ix-p-4xlpadding: var(--ix-spacing-4xl);
.ix-pt-0padding-top: 0;
.ix-pt-2xspadding-top: var(--ix-spacing-2xs);
.ix-pt-xspadding-top: var(--ix-spacing-xs);
.ix-pt-smpadding-top: var(--ix-spacing-sm);
.ix-pt-mdpadding-top: var(--ix-spacing-md);
.ix-pt-lgpadding-top: var(--ix-spacing-lg);
.ix-pt-xlpadding-top: var(--ix-spacing-xl);
.ix-pt-2xlpadding-top: var(--ix-spacing-2xl);
.ix-pt-3xlpadding-top: var(--ix-spacing-3xl);
.ix-pt-4xlpadding-top: var(--ix-spacing-4xl);
.ix-pr-0padding-right: 0;
.ix-pr-2xspadding-right: var(--ix-spacing-2xs);
.ix-pr-xspadding-right: var(--ix-spacing-xs);
.ix-pr-smpadding-right: var(--ix-spacing-sm);
.ix-pr-mdpadding-right: var(--ix-spacing-md);
.ix-pr-lgpadding-right: var(--ix-spacing-lg);
.ix-pr-xlpadding-right: var(--ix-spacing-xl);
.ix-pr-2xlpadding-right: var(--ix-spacing-2xl);
.ix-pr-3xlpadding-right: var(--ix-spacing-3xl);
.ix-pr-4xlpadding-right: var(--ix-spacing-4xl);
.ix-pb-0padding-bottom: 0;
.ix-pb-2xspadding-bottom: var(--ix-spacing-2xs);
.ix-pb-xspadding-bottom: var(--ix-spacing-xs);
.ix-pb-smpadding-bottom: var(--ix-spacing-sm);
.ix-pb-mdpadding-bottom: var(--ix-spacing-md);
.ix-pb-lgpadding-bottom: var(--ix-spacing-lg);
.ix-pb-xlpadding-bottom: var(--ix-spacing-xl);
.ix-pb-2xlpadding-bottom: var(--ix-spacing-2xl);
.ix-pb-3xlpadding-bottom: var(--ix-spacing-3xl);
.ix-pb-4xlpadding-bottom: var(--ix-spacing-4xl);
.ix-pl-0padding-left: 0;
.ix-pl-2xspadding-left: var(--ix-spacing-2xs);
.ix-pl-xspadding-left: var(--ix-spacing-xs);
.ix-pl-smpadding-left: var(--ix-spacing-sm);
.ix-pl-mdpadding-left: var(--ix-spacing-md);
.ix-pl-lgpadding-left: var(--ix-spacing-lg);
.ix-pl-xlpadding-left: var(--ix-spacing-xl);
.ix-pl-2xlpadding-left: var(--ix-spacing-2xl);
.ix-pl-3xlpadding-left: var(--ix-spacing-3xl);
.ix-pl-4xlpadding-left: var(--ix-spacing-4xl);

Margin​

CSS-klasseVerdi
.ix-m-0margin: 0;
.ix-m-automargin: auto;
.ix-m-2xsmargin: var(--ix-spacing-2xs);
.ix-m-xsmargin: var(--ix-spacing-xs);
.ix-m-smmargin: var(--ix-spacing-sm);
.ix-m-mdmargin: var(--ix-spacing-md);
.ix-m-lgmargin: var(--ix-spacing-lg);
.ix-m-xlmargin: var(--ix-spacing-xl);
.ix-m-2xlmargin: var(--ix-spacing-2xl);
.ix-m-3xlmargin: var(--ix-spacing-3xl);
.ix-m-4xlmargin: var(--ix-spacing-4xl);
.ix-mt-0margin-top: 0;
.ix-mt-2xsmargin-top: var(--ix-spacing-2xs);
.ix-mt-xsmargin-top: var(--ix-spacing-xs);
.ix-mt-smmargin-top: var(--ix-spacing-sm);
.ix-mt-mdmargin-top: var(--ix-spacing-md);
.ix-mt-lgmargin-top: var(--ix-spacing-lg);
.ix-mt-xlmargin-top: var(--ix-spacing-xl);
.ix-mt-2xlmargin-top: var(--ix-spacing-2xl);
.ix-mt-3xlmargin-top: var(--ix-spacing-3xl);
.ix-mt-4xlmargin-top: var(--ix-spacing-4xl);
.ix-mr-0margin-right: 0;
.ix-mr-2xsmargin-right: var(--ix-spacing-2xs);
.ix-mr-xsmargin-right: var(--ix-spacing-xs);
.ix-mr-smmargin-right: var(--ix-spacing-sm);
.ix-mr-mdmargin-right: var(--ix-spacing-md);
.ix-mr-lgmargin-right: var(--ix-spacing-lg);
.ix-mr-xlmargin-right: var(--ix-spacing-xl);
.ix-mr-2xlmargin-right: var(--ix-spacing-2xl);
.ix-mr-3xlmargin-right: var(--ix-spacing-3xl);
.ix-mr-4xlmargin-right: var(--ix-spacing-4xl);
.ix-mb-0margin-bottom: 0;
.ix-mb-2xsmargin-bottom: var(--ix-spacing-2xs);
.ix-mb-xsmargin-bottom: var(--ix-spacing-xs);
.ix-mb-smmargin-bottom: var(--ix-spacing-sm);
.ix-mb-mdmargin-bottom: var(--ix-spacing-md);
.ix-mb-lgmargin-bottom: var(--ix-spacing-lg);
.ix-mb-xlmargin-bottom: var(--ix-spacing-xl);
.ix-mb-2xlmargin-bottom: var(--ix-spacing-2xl);
.ix-mb-3xlmargin-bottom: var(--ix-spacing-3xl);
.ix-mb-4xlmargin-bottom: var(--ix-spacing-4xl);
.ix-ml-0margin-left: 0;
.ix-ml-2xsmargin-left: var(--ix-spacing-2xs);
.ix-ml-xsmargin-left: var(--ix-spacing-xs);
.ix-ml-smmargin-left: var(--ix-spacing-sm);
.ix-ml-mdmargin-left: var(--ix-spacing-md);
.ix-ml-lgmargin-left: var(--ix-spacing-lg);
.ix-ml-xlmargin-left: var(--ix-spacing-xl);
.ix-ml-2xlmargin-left: var(--ix-spacing-2xl);
.ix-ml-3xlmargin-left: var(--ix-spacing-3xl);
.ix-ml-4xlmargin-left: var(--ix-spacing-4xl);
.ix-my-2xsmargin-block: var(--ix-spacing-2xs)
.ix-my-xsmargin-block: var(--ix-spacing-xs);
.ix-my-smmargin-block: var(--ix-spacing-sm);
.ix-my-mdmargin-block: var(--ix-spacing-md);
.ix-my-lgmargin-block: var(--ix-spacing-lg);
.ix-my-xlmargin-block: var(--ix-spacing-xl);
.ix-my-2xlmargin-block: var(--ix-spacing-2xl);
.ix-my-3xlmargin-block: var(--ix-spacing-3xl);
.ix-my-4xlmargin-block: var(--ix-spacing-4xl);
.ix-mx-2xsmargin-inline: var(--ix-spacing-2xs);
.ix-mx-xsmargin-inline: var(--ix-spacing-xs);
.ix-mx-smmargin-inline: var(--ix-spacing-sm);
.ix-mx-mdmargin-inline: var(--ix-spacing-md);
.ix-mx-lgmargin-inline: var(--ix-spacing-lg);
.ix-mx-xlmargin-inline: var(--ix-spacing-xl);
.ix-mx-2xlmargin-inline: var(--ix-spacing-2xl);
.ix-mx-3xlmargin-inline: var(--ix-spacing-3xl);
.ix-mx-4xlmargin-inline: var(--ix-spacing-4xl);

Gap​

CSS-klasseVerdi
.ix-gap-2xsgap: var(--ix-spacing-2xs);
.ix-gap-xsgap: var(--ix-spacing-xs);
.ix-gap-smgap: var(--ix-spacing-sm);
.ix-gap-mdgap: var(--ix-spacing-md);
.ix-gap-lggap: var(--ix-spacing-lg);
.ix-gap-xlgap: var(--ix-spacing-xl);
.ix-gap-2xlgap: var(--ix-spacing-2xl);
.ix-gap-3xlgap: var(--ix-spacing-3xl);
.ix-gap-4xlgap: var(--ix-spacing-4xl);

Responsiv spacing​

Alle spacing-utilities har også responsive varianter for sm, md, lg og xl skjermstørrelser. Disse klassene fungerer på samme måte som standard-variantene, men aktiveres kun ved angitt skjermstørrelse og oppover.

Skjermstørrelse legges til i klassenavnet som prefix, rett etter det globale ix-prefixet. Klassenavn for responsiv spacing bygges opp på denne måten:

.ix-<skjermstørrelse>-<property>-<verdi>

For eksempel gir klassen .ix-md-p-2xl padding med verdien av 2xl på medium (md) skjermstørrelser og oppover.

Responsiv margin​

CSS-klasseVerdi
.ix-<skjermstørrelse>-m-0margin: 0;
.ix-<skjermstørrelse>-m-2xsmargin: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-m-xsmargin: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-m-smmargin: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-m-mdmargin: var(--ix-spacing-md);
.ix-<skjermstørrelse>-m-lgmargin: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-m-xlmargin: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-m-2xlmargin: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-m-3xlmargin: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-m-4xlmargin: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-m-automargin: auto;
.ix-<skjermstørrelse>-mt-0margin-top: 0;
.ix-<skjermstørrelse>-mt-2xsmargin-top: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-mt-xsmargin-top: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-mt-smmargin-top: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-mt-mdmargin-top: var(--ix-spacing-md);
.ix-<skjermstørrelse>-mt-lgmargin-top: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-mt-xlmargin-top: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-mt-2xlmargin-top: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-mt-3xlmargin-top: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-mt-4xlmargin-top: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-mb-0margin-bottom: 0;
.ix-<skjermstørrelse>-mb-2xsmargin-bottom: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-mb-xsmargin-bottom: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-mb-smmargin-bottom: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-mb-mdmargin-bottom: var(--ix-spacing-md);
.ix-<skjermstørrelse>-mb-lgmargin-bottom: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-mb-xlmargin-bottom: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-mb-2xlmargin-bottom: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-mb-3xlmargin-bottom: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-mb-4xlmargin-bottom: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-mr-0margin-right: 0;
.ix-<skjermstørrelse>-mr-2xsmargin-right: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-mr-xsmargin-right: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-mr-smmargin-right: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-mr-mdmargin-right: var(--ix-spacing-md);
.ix-<skjermstørrelse>-mr-lgmargin-right: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-mr-xlmargin-right: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-mr-2xlmargin-right: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-mr-3xlmargin-right: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-mr-4xlmargin-right: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-ml-0margin-left: 0;
.ix-<skjermstørrelse>-ml-2xsmargin-left: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-ml-xsmargin-left: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-ml-smmargin-left: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-ml-mdmargin-left: var(--ix-spacing-md);
.ix-<skjermstørrelse>-ml-lgmargin-left: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-ml-xlmargin-left: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-ml-2xlmargin-left: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-ml-3xlmargin-left: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-ml-4xlmargin-left: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-my-2xsmargin-block: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-my-xsmargin-block: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-my-smmargin-block: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-my-mdmargin-block: var(--ix-spacing-md);
.ix-<skjermstørrelse>-my-lgmargin-block: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-my-xlmargin-block: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-my-2xlmargin-block: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-my-3xlmargin-block: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-my-4xlmargin-block: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-mx-2xsmargin-inline: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-mx-xsmargin-inline: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-mx-smmargin-inline: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-mx-mdmargin-inline: var(--ix-spacing-md);
.ix-<skjermstørrelse>-mx-lgmargin-inline: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-mx-xlmargin-inline: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-mx-2xlmargin-inline: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-mx-3xlmargin-inline: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-mx-4xlmargin-inline: var(--ix-spacing-4xl);

Responsiv padding og gap følger samme mønster som responsiv margin.

Responsiv padding​

CSS-klasseVerdi
.ix-<skjermstørrelse>-p-0padding: 0;
.ix-<skjermstørrelse>-p-2xspadding: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-p-xspadding: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-p-smpadding: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-p-mdpadding: var(--ix-spacing-md);
.ix-<skjermstørrelse>-p-lgpadding: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-p-xlpadding: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-p-2xlpadding: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-p-3xlpadding: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-p-4xlpadding: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-pt-0padding-top: 0;
.ix-<skjermstørrelse>-pt-2xspadding-top: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-pt-xspadding-top: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-pt-smpadding-top: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-pt-mdpadding-top: var(--ix-spacing-md);
.ix-<skjermstørrelse>-pt-lgpadding-top: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-pt-xlpadding-top: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-pt-2xlpadding-top: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-pt-3xlpadding-top: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-pt-4xlpadding-top: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-pb-0padding-bottom: 0;
.ix-<skjermstørrelse>-pb-2xspadding-bottom: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-pb-xspadding-bottom: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-pb-smpadding-bottom: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-pb-mdpadding-bottom: var(--ix-spacing-md);
.ix-<skjermstørrelse>-pb-lgpadding-bottom: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-pb-xlpadding-bottom: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-pb-2xlpadding-bottom: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-pb-3xlpadding-bottom: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-pb-4xlpadding-bottom: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-pr-0padding-right: 0;
.ix-<skjermstørrelse>-pr-2xspadding-right: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-pr-xspadding-right: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-pr-smpadding-right: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-pr-mdpadding-right: var(--ix-spacing-md);
.ix-<skjermstørrelse>-pr-lgpadding-right: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-pr-xlpadding-right: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-pr-2xlpadding-right: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-pr-3xlpadding-right: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-pr-4xlpadding-right: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-pl-0padding-left: 0;
.ix-<skjermstørrelse>-pl-2xspadding-left: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-pl-xspadding-left: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-pl-smpadding-left: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-pl-mdpadding-left: var(--ix-spacing-md);
.ix-<skjermstørrelse>-pl-lgpadding-left: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-pl-xlpadding-left: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-pl-2xlpadding-left: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-pl-3xlpadding-left: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-pl-4xlpadding-left: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-py-2xspadding-top: var(--ix-spacing-2xs);
padding-bottom: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-py-xspadding-top: var(--ix-spacing-xs);
padding-bottom: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-py-smpadding-top: var(--ix-spacing-sm);
padding-bottom: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-py-mdpadding-top: var(--ix-spacing-md);
padding-bottom: var(--ix-spacing-md);
.ix-<skjermstørrelse>-py-lgpadding-top: var(--ix-spacing-lg);
padding-bottom: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-py-xlpadding-top: var(--ix-spacing-xl);
padding-bottom: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-py-2xlpadding-top: var(--ix-spacing-2xl);
padding-bottom: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-py-3xlpadding-top: var(--ix-spacing-3xl);
padding-bottom: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-py-4xlpadding-top: var(--ix-spacing-4xl);
padding-bottom: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-px-2xspadding-left: var(--ix-spacing-2xs);
padding-right: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-px-xspadding-left: var(--ix-spacing-xs);
padding-right: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-px-smpadding-left: var(--ix-spacing-sm);
padding-right: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-px-mdpadding-left: var(--ix-spacing-md);
padding-right: var(--ix-spacing-md);
.ix-<skjermstørrelse>-px-lgpadding-left: var(--ix-spacing-lg);
padding-right: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-px-xlpadding-left: var(--ix-spacing-xl);
padding-right: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-px-2xlpadding-left: var(--ix-spacing-2xl);
padding-right: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-px-3xlpadding-left: var(--ix-spacing-3xl);
padding-right: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-px-4xlpadding-left: var(--ix-spacing-4xl);
padding-right: var(--ix-spacing-4xl);

Responsiv gap​

CSS-klasseVerdi
.ix-<skjermstørrelse>-gap-2xsgap: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-gap-xsgap: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-gap-smgap: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-gap-mdgap: var(--ix-spacing-md);
.ix-<skjermstørrelse>-gap-lggap: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-gap-xlgap: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-gap-2xlgap: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-gap-3xlgap: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-gap-4xlgap: var(--ix-spacing-4xl);

Density modifiers​

CSS-klasseBeskrivelse
.ix-density--defaultStandard density
.ix-density--compactKompakt density (verdiene i spacing-skalaen er 1 steg lavere)
.ix-density--comfortableKomfortabel density (verdiene i spacing-skalaen er 1 steg høyere)

Flex​

CSS-klasseVerdi
.ix-flexdisplay: flex;
.ix-inline-flexdisplay: inline-flex;
.ix-flex-rowflex-direction: row;
.ix-flex-colflex-direction: column;
.ix-flex-wrapflex-wrap: wrap;
.ix-flex-nowrapflex-wrap: nowrap;
.ix-flex-growflex-grow: 1;
.ix-flex-shrinkflex-shrink: 1;
.ix-justify-startjustify-content: flex-start;
.ix-justify-centerjustify-content: center;
.ix-justify-endjustify-content: flex-end;
.ix-justify-betweenjustify-content: space-between;
.ix-justify-aroundjustify-content: space-around;
.ix-justify-evenlyjustify-content: space-evenly;
.ix-justify-stretchjustify-content: stretch;
.ix-items-startalign-items: flex-start;
.ix-items-centeralign-items: center;
.ix-items-endalign-items: flex-end;
.ix-items-stretchalign-items: stretch;
.ix-items-baselinealign-items: baseline;
.ix-self-autoalign-self: auto;

Responsiv flex​

Flex-klassene har også responsive varianter for sm, md, lg og xl skjermstørrelser. Disse fungerer på samme måte som standard-variantene, men aktiveres kun ved angitt skjermstørrelse og oppover.

Skjermstørrelse legges til i klassenavnet som prefix, rett etter det globale ix-prefixet. Klassenavn for responsiv flex bygges opp på denne måten:

.ix-<skjermstørrelse>-<property>

For eksempel kan klassen .ix-md-flex brukes for å sette display: flex på medium (md) skjermstørrelser og oppover.

Grid​

CSS-klasseVerdi
.ix-griddisplay: grid;
.ix-inline-griddisplay: inline-grid;
.ix-grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));
.ix-grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));
.ix-grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));
.ix-grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));
.ix-grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));
.ix-grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));
.ix-grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));
.ix-grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));
.ix-grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));
.ix-grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));
.ix-grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));
.ix-grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));
.ix-grid-stretch-middlegrid-template-columns: auto 1fr auto;
.ix-grid-auto-fit-xsgrid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
.ix-grid-auto-fit-smgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
.ix-grid-auto-fit-mdgrid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
.ix-grid-auto-fit-lggrid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
.ix-grid-auto-fill-xsgrid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
.ix-grid-auto-fill-smgrid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
.ix-grid-auto-fill-mdgrid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.ix-grid-auto-fill-lggrid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
.ix-grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
.ix-grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr));
.ix-grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr));
.ix-grid-rows-4grid-template-rows: repeat(4, minmax(0, 1fr));
.ix-col-span-1grid-column: span 1 / span 1;
.ix-col-span-2grid-column: span 2 / span 2;
.ix-col-span-3grid-column: span 3 / span 3;
.ix-col-span-4grid-column: span 4 / span 4;
.ix-col-span-5grid-column: span 5 / span 5;
.ix-col-span-6grid-column: span 6 / span 6;
.ix-col-span-fullgrid-column: span 12 / span 12;
.ix-row-span-1grid-row: span 1 / span 1;
.ix-row-span-2grid-row: span 2 / span 2;
.ix-row-span-3grid-row: span 3 / span 3;
.ix-row-span-fullgrid-row: span 12 / span 12;
.ix-col-start-1grid-column-start: 1;
.ix-col-start-2grid-column-start: 2;
.ix-col-start-3grid-column-start: 3;
.ix-col-end-1grid-column-end: 1;
.ix-col-end-2grid-column-end: 2;
.ix-col-end-3grid-column-end: 3;

Responsiv grid​

Grid-klassene har også responsive varianter for sm, md, lg og xl skjermstørrelser. Disse fungerer på samme måte som standard-variantene, men aktiveres kun ved angitt skjermstørrelse og oppover.

Skjermstørrelse legges til i klassenavnet som prefix, rett etter det globale ix-prefixet. Klassenavn for responsiv grid bygges opp på denne måten:

.ix-<skjermstørrelse>-<property>

For eksempel kan klassen .ix-md-grid brukes for å sette display: grid på medium (md) skjermstørrelser og oppover.

Størrelser​

CSS-klasseVerdi
.ix-w-fullwidth: 100%;
.ix-w-fitwidth: fit-content;
.ix-max-w-smmax-width: 768px;
.ix-max-w-mdmax-width: 1024px;
.ix-max-w-lgmax-width: 1280px;
.ix-max-w-xlmax-width: 1600px;
.ix-h-fullheight: 100%;
.ix-h-fitheight: fit-content;
.ix-size-fullwidth: 100%; height: 100%;

Responsive størrelser​

Utility-klassene for størrelser har også responsive varianter for sm, md, lg og xl skjermstørrelser. Disse klassene fungerer på samme måte som standard-variantene, men aktiveres kun ved angitt skjermstørrelse og oppover.

CSS-klasseVerdi
.ix-<skjermstørrelse>-w-fullwidth: 100%;
.ix-<skjermstørrelse>-w-fitwidth: fit-content;
.ix-<skjermstørrelse>-h-fullheight: 100%;
.ix-<skjermstørrelse>-h-fitheight: fit-content;
.ix-<skjermstørrelse>-size-fullwidth: 100%; height: 100%;

Display​

CSS-klasseVerdi
.ix-blockdisplay: block;
.ix-inlinedisplay: inline;
.ix-inline-blockdisplay: inline-block;
.ix-hiddendisplay: none;

Position​

CSS-klasseVerdi
.ix-relativeposition: relative;
.ix-absoluteposition: absolute;
.ix-fixedposition: fixed;
.ix-stickyposition: sticky;
.ix-top-0top: 0;
.ix-right-0right: 0;
.ix-bottom-0bottom: 0;
.ix-left-0left: 0;

Z-Index​

CSS klasseVerdiBeskrivelse
.ix-z-background-1Bakgrunnselementer som alltid skal ligge bak alt annet.
.ix-z-default0Standard z-index for vanlige komponenter og innhold.
.ix-z-elevated1Brukes for elementer som skal ligge over standard innhold.
.ix-z-overlay20Overlay som skal ligge over innholdet på siden.
.ix-z-dialog60Dialoger som skal ligge over alt annet.
.ix-z-max100For når du har noe som må ligge øverst uansett hva. Vi annbefaler å bruke denne like mye som !important. Dvs. aldri.

Tekst​

CSS-klasseVerdi
.ix-text-lefttext-align: left;
.ix-text-centertext-align: center;
.ix-text-righttext-align: right;
.ix-text-justifytext-align: justify;
.ix-text-inherittext-align: inherit;
.ix-whitespace-nowrapwhite-space: nowrap;
.ix-truncatetext-overflow: ellipsis; overflow: hidden; white-space: nowrap;
.ix-underlinetext-decoration: underline;
.ix-no-underlinetext-decoration: none;
.ix-line-throughtext-decoration: line-through;

Overflow​

CSS-klasseVerdi
.ix-overflow-hiddenoverflow: hidden;
.ix-overflow-autooverflow: auto;
.ix-overflow-visibleoverflow: visible;
.ix-overflow-scrolloverflow: scroll;

Lister​

CSS-klasseVerdi
.ix-list-nonelist-style: none;
.ix-list-disclist-style: disc;
.ix-list-decimallist-style: decimal;
.ix-list-insidelist-style-position: inside;
CSS Reset

Indeks bruker en avart av reset.css for å sikre et konsistent utgangspunkt for styling på tvers av nettlesere, i motsetning til FFE, som bruker normalize.css. Det betyr at det kan være noen forskjeller i grunnleggende styling mellom FFE og Indeks, blant annet har ikke listeelementer bullet points som standard.

Border​

CSS klasseVerdiBeskrivelse
.ix-border-width-default1pxStandard border-width.
.ix-border-width-bold2pxBorder-width for buttons.
CSS klasseVerdiBeskrivelse
.ix-border-radius-circle50%Fullt avrundet border-radius.
.ix-border-radius-pill9999pxBorder-radius for pille-formede elementer. Feks. knapper.
.ix-border-radius-checkbox4pxBorder-radius for avkrysningsbokser.
.ix-border-radius-input8pxBorder-radius for input-felt.
.ix-border-radius-buttonvar(--ix-border-radius-pill)Border-radius for knapper.
.ix-border-radius-xs4pxLiten border-radius.
.ix-border-radius-sm8pxMedium border-radius. Brukes til input-felt.
.ix-border-radius-md16pxStor border-radius. Brukes til kort.
.ix-border-radius-lg24pxEkstra stor border-radius. Brukes til modaler.
.ix-border-radius-xl40pxEkstra stor border-radius.

Outline​

CSS klasseVerdiBeskrivelse
.ix-outline-width-default2pxStandard outline-bredde.
CSS klasseVerdiBeskrivelse
.ix-outline-offset-default3pxStandard outline-offset.

Bakgrunnsfarger​

CSS-klasseBeskrivelse
.ix-color-surface-main-defaultPrimær bakgrunnsfarge
.ix-surface-secondarySekundær bakgrunnsfarge
.ix-surface-tertiaryTertiær bakgrunnsfarge
.ix-surface-neutralNøytral bakgrunnsfarge
.ix-color-background-defaultStandard bakgrunnsfarge
.ix-color-background-defaultSubtil bakgrunnsfarge

Transition​

Transitions i Indeks bruker standardverdier for varighet og timing-funksjon, som er definert i CSS-variabler. Disse variablene kan brukes i egne stiler for å sikre konsistente overganger.

CSS-variabelVerdiBeskrivelse
--ix-transition-duration0.2sStandard varighet for overganger
--ix-transition-timing-functioncubic-bezier(.25, .1, .25, 1)Standard timing-funksjon for overganger

Du kan også bruke en forhåndsdefinert utility-klasse som bruker disse verdiene for å enkelt legge til en overgang på et element:

<a href="#" className="ix-transition-all">Hover over meg</a>

Typografi-variabler​

Tekststørrelser i Indeks er basert på en skala med verdier regnet ut fra en baseverdi. Baseverdien er responsiv og varierer mellom 1rem og 1.125rem basert på skjermstørrelse. Alle font-sizer beregnes som multipler av baseverdien.

CSS-variabelBeskrivelse
--ix-font-size-xsEkstra liten skriftstørrelse (0.8 x baseverdi)
--ix-font-size-smLiten skriftstørrelse (0.9 x baseverdi)
--ix-font-size-mdMedium skriftstørrelse (1rem - baseverdi)
--ix-font-size-lgStor skriftstørrelse (1.125 x baseverdi)
--ix-font-size-xlEkstra stor skriftstørrelse (1.27 x baseverdi)
--ix-font-size-2xl2x ekstra stor skriftstørrelse (1.42 x baseverdi)
--ix-font-size-3xl3x ekstra stor skriftstørrelse (1.6 x baseverdi)
--ix-font-size-4xl4x ekstra stor skriftstørrelse (2.03 x baseverdi)
--ix-font-size-5xl5x ekstra stor skriftstørrelse (2.57 x baseverdi)
--ix-font-size-6xl6x ekstra stor skriftstørrelse (3.25 x baseverdi)

Tilgjengelighet​

CSS-klasseBeskrivelse
.ix-sr-onlyElement kun tilgjengelig for skjermlesere