Skip to main content

Utility-klasser

En utility-klasse setter én CSS-property, eller et lite sett som hører sammen. Du kombinerer dem i markupen i stedet for å skrive egen CSS for hvert tilfelle, og komponentene i Indeks er i stor grad bygget på dem.

Verdiene bak klassene er de samme design tokenene som ligger i Figma, eksponert som CSS-variabler. Endrer et token seg, endrer klassen seg med.

Under står hele settet.

Eksempel​

Klassene dekker spacing (margin, padding, gap), flex- og grid-verdier, farger, typografi og border. Her er en flex-container med main-flate, medium padding og ekstra stor margin i topp:

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

Spacing​

Spacing i Indeks bruker faste px-verdier som justeres på tre breakpoints (mobil, tablet fra 768px, desktop fra 1024px). De minste verdiene (2xs–lg) er like på alle breakpoints; kun xl–5xl øker på større skjermer. Verdiene kan overstyres av density-modifierne. Se spacing-skalaen for alle verdier.

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-p-5xlpadding: var(--ix-spacing-5xl);
.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-pt-5xlpadding-top: var(--ix-spacing-5xl);
.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-pr-5xlpadding-right: var(--ix-spacing-5xl);
.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-pb-5xlpadding-bottom: var(--ix-spacing-5xl);
.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);
.ix-pl-5xlpadding-left: var(--ix-spacing-5xl);
.ix-px-0padding-inline: 0;
.ix-px-2xspadding-inline: var(--ix-spacing-2xs);
.ix-px-xspadding-inline: var(--ix-spacing-xs);
.ix-px-smpadding-inline: var(--ix-spacing-sm);
.ix-px-mdpadding-inline: var(--ix-spacing-md);
.ix-px-lgpadding-inline: var(--ix-spacing-lg);
.ix-px-xlpadding-inline: var(--ix-spacing-xl);
.ix-px-2xlpadding-inline: var(--ix-spacing-2xl);
.ix-px-3xlpadding-inline: var(--ix-spacing-3xl);
.ix-px-4xlpadding-inline: var(--ix-spacing-4xl);
.ix-px-5xlpadding-inline: var(--ix-spacing-5xl);
.ix-py-0padding-block: 0;
.ix-py-2xspadding-block: var(--ix-spacing-2xs);
.ix-py-xspadding-block: var(--ix-spacing-xs);
.ix-py-smpadding-block: var(--ix-spacing-sm);
.ix-py-mdpadding-block: var(--ix-spacing-md);
.ix-py-lgpadding-block: var(--ix-spacing-lg);
.ix-py-xlpadding-block: var(--ix-spacing-xl);
.ix-py-2xlpadding-block: var(--ix-spacing-2xl);
.ix-py-3xlpadding-block: var(--ix-spacing-3xl);
.ix-py-4xlpadding-block: var(--ix-spacing-4xl);
.ix-py-5xlpadding-block: var(--ix-spacing-5xl);

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-m-5xlmargin: var(--ix-spacing-5xl);
.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-mt-5xlmargin-top: var(--ix-spacing-5xl);
.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-mr-5xlmargin-right: var(--ix-spacing-5xl);
.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-mb-5xlmargin-bottom: var(--ix-spacing-5xl);
.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-ml-5xlmargin-left: var(--ix-spacing-5xl);
.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-my-5xlmargin-block: var(--ix-spacing-5xl);
.ix-mx-0margin-inline: 0;
.ix-mx-automargin-inline: auto;
.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);
.ix-mx-5xlmargin-inline: var(--ix-spacing-5xl);

Gap​

gap setter både row-gap og column-gap samtidig. Bruk row-gap/col-gap når du trenger ulike verdier i de to retningene.

CSS-klasseVerdi
.ix-gap-0gap: 0;
.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);
.ix-gap-5xlgap: var(--ix-spacing-5xl);
.ix-row-gap-0row-gap: 0;
.ix-row-gap-2xsrow-gap: var(--ix-spacing-2xs);
.ix-row-gap-xsrow-gap: var(--ix-spacing-xs);
.ix-row-gap-smrow-gap: var(--ix-spacing-sm);
.ix-row-gap-mdrow-gap: var(--ix-spacing-md);
.ix-row-gap-lgrow-gap: var(--ix-spacing-lg);
.ix-row-gap-xlrow-gap: var(--ix-spacing-xl);
.ix-row-gap-2xlrow-gap: var(--ix-spacing-2xl);
.ix-row-gap-3xlrow-gap: var(--ix-spacing-3xl);
.ix-row-gap-4xlrow-gap: var(--ix-spacing-4xl);
.ix-row-gap-5xlrow-gap: var(--ix-spacing-5xl);
.ix-col-gap-0column-gap: 0;
.ix-col-gap-2xscolumn-gap: var(--ix-spacing-2xs);
.ix-col-gap-xscolumn-gap: var(--ix-spacing-xs);
.ix-col-gap-smcolumn-gap: var(--ix-spacing-sm);
.ix-col-gap-mdcolumn-gap: var(--ix-spacing-md);
.ix-col-gap-lgcolumn-gap: var(--ix-spacing-lg);
.ix-col-gap-xlcolumn-gap: var(--ix-spacing-xl);
.ix-col-gap-2xlcolumn-gap: var(--ix-spacing-2xl);
.ix-col-gap-3xlcolumn-gap: var(--ix-spacing-3xl);
.ix-col-gap-4xlcolumn-gap: var(--ix-spacing-4xl);
.ix-col-gap-5xlcolumn-gap: var(--ix-spacing-5xl);

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-5xlmargin: var(--ix-spacing-5xl);
.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>-mt-5xlmargin-top: var(--ix-spacing-5xl);
.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>-mb-5xlmargin-bottom: var(--ix-spacing-5xl);
.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>-mr-5xlmargin-right: var(--ix-spacing-5xl);
.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>-ml-5xlmargin-left: var(--ix-spacing-5xl);
.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>-my-5xlmargin-block: var(--ix-spacing-5xl);
.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);
.ix-<skjermstørrelse>-mx-5xlmargin-inline: var(--ix-spacing-5xl);

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>-p-5xlpadding: var(--ix-spacing-5xl);
.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>-pt-5xlpadding-top: var(--ix-spacing-5xl);
.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>-pb-5xlpadding-bottom: var(--ix-spacing-5xl);
.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>-pr-5xlpadding-right: var(--ix-spacing-5xl);
.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>-pl-5xlpadding-left: var(--ix-spacing-5xl);
.ix-<skjermstørrelse>-py-2xspadding-block: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-py-xspadding-block: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-py-smpadding-block: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-py-mdpadding-block: var(--ix-spacing-md);
.ix-<skjermstørrelse>-py-lgpadding-block: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-py-xlpadding-block: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-py-2xlpadding-block: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-py-3xlpadding-block: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-py-4xlpadding-block: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-py-5xlpadding-block: var(--ix-spacing-5xl);
.ix-<skjermstørrelse>-px-2xspadding-inline: var(--ix-spacing-2xs);
.ix-<skjermstørrelse>-px-xspadding-inline: var(--ix-spacing-xs);
.ix-<skjermstørrelse>-px-smpadding-inline: var(--ix-spacing-sm);
.ix-<skjermstørrelse>-px-mdpadding-inline: var(--ix-spacing-md);
.ix-<skjermstørrelse>-px-lgpadding-inline: var(--ix-spacing-lg);
.ix-<skjermstørrelse>-px-xlpadding-inline: var(--ix-spacing-xl);
.ix-<skjermstørrelse>-px-2xlpadding-inline: var(--ix-spacing-2xl);
.ix-<skjermstørrelse>-px-3xlpadding-inline: var(--ix-spacing-3xl);
.ix-<skjermstørrelse>-px-4xlpadding-inline: var(--ix-spacing-4xl);
.ix-<skjermstørrelse>-px-5xlpadding-inline: var(--ix-spacing-5xl);

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);
.ix-<skjermstørrelse>-gap-5xlgap: var(--ix-spacing-5xl);

Density modifiers​

AttributtBeskrivelse
data-density="default"Standard density
data-density="compact"Kompakt density (verdiene i spacing-skalaen er 1 steg lavere)
data-density="comfortable"Komfortabel 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-6grid-template-columns: repeat(6, 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-6grid-column: span 6 / span 6;
.ix-col-span-8grid-column: span 8 / span 8;
.ix-col-span-9grid-column: span 9 / span 9;
.ix-col-span-10grid-column: span 10 / span 10;
.ix-col-span-11grid-column: span 11 / span 11;
.ix-col-span-12grid-column: span 12 / span 12;
.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 bygger på en variant av reset.css, mens FFE bruker normalize.css. Kommer du fra FFE, vil grunnstylingen derfor være litt annerledes. Det mest merkbare er at listeelementer ikke har bullet points som standard.

Border​

CSS-klasseVerdi
.ix-border-defaultborder: var(--ix-border-width-default) solid var(--ix-color-border-main-default);
.ix-border-top-defaultborder-top: var(--ix-border-width-default) solid var(--ix-color-border-main-default);
.ix-border-right-defaultborder-right: var(--ix-border-width-default) solid var(--ix-color-border-main-default);
.ix-border-bottom-defaultborder-bottom: var(--ix-border-width-default) solid var(--ix-color-border-main-default);
.ix-border-left-defaultborder-left: var(--ix-border-width-default) solid var(--ix-color-border-main-default);
.ix-border-dashedborder: var(--ix-border-width-default) dashed var(--ix-color-border-main-default);
.ix-border-noneborder: none;
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-klasseVerdi
.ix-outline-defaultoutline: var(--ix-outline-width-default) solid var(--ix-color-border-focus-default);
CSS klasseVerdiBeskrivelse
.ix-outline-width-default2pxStandard outline-bredde.
CSS klasseVerdiBeskrivelse
.ix-outline-offset-default3pxStandard outline-offset.

Bakgrunnsfarger​

Bakgrunn på en side settes med background, flater som ligger oppå den med surface, og mindre elementer med fill. Se Farger for når du bruker hvilken.

CSS-klasseBeskrivelse
.ix-color-background-defaultSidebakgrunn
.ix-color-background-tintedTonet sidebakgrunn
.ix-color-surface-main-defaultFlate oppå bakgrunnen, for eksempel et kort
.ix-color-surface-main-activeSamme flate mens den trykkes
.ix-color-surface-{status}-defaultStatusflate. {status} er info, success, warning eller danger
.ix-color-surface-{status}-activeStatusflate mens den trykkes
.ix-color-fill-{variant}-defaultFyll på mindre elementer. {variant} er main, neutral, info, success, warning eller danger. Legg til -active for trykket tilstand
.ix-color-fill-{variant}-subtleSvakere fyll av samme variant. Også med -active
.ix-color-fill-interactive-defaultFyll på skjemaelementer: input, checkbox, radio. Finnes også som -active, -disabled og -read-only

Transition​

Varighet og timing-funksjon for overganger ligger i CSS-variabler. Bruk dem i egne stiler, så beveger det du lager seg i samme tempo som resten av grensesnittet.

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, baseverdien)
--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)

Universell utforming​

CSS-klasseBeskrivelse
.ix-sr-onlyElement kun tilgjengelig for skjermlesere
Rapporter feil på denne siden