box-layout

box-layout pakker innhold i en boks med konsistent padding.

I de aller fleste tilfeller skal du bruke size. size er knyttet direkte til spacing-tokenene i designsystemet og sikrer at paddingen er konsistent på tvers av sider og komponenter.

Størrelse

size setter padding rundt innholdet ved bruk av et spacing-token. Hvis size ikke er satt, brukes medium som standard.

<box-layout size="small" background="neutral-subtle">
  <div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</box-layout>
<box-layout background="neutral-subtle">
  <div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</box-layout>
<box-layout size="large" background="neutral-subtle">
  <div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</box-layout>

Padding

padding setter padding som en eksakt CSS-verdi. Brukes kun når du trenger en verdi som ikke finnes blant tokenene.

<box-layout padding="0.25rem" background="neutral-subtle">
  <div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</box-layout>
<box-layout padding="1rem" background="neutral-subtle">
  <div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</box-layout>
<box-layout padding="3rem" background="neutral-subtle">
  <div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</box-layout>

Bruk size i stedet når du jobber med designsystemets avstander. Padding er ment for unntakstilfeller der du må ha en helt spesifikk og ikke-tokenbasert verdi.

Bakgrunn

background setter en tokenbasert bakgrunnsfarge på boksen. Verdiene mapper til feedback-fargene i designsystemet.

<box-layout background="neutral">
  <nve-paragraph>neutral</nve-paragraph>
</box-layout>
<box-layout background="info">
  <nve-paragraph>info</nve-paragraph>
</box-layout>
<box-layout background="success">
  <nve-paragraph>success</nve-paragraph>
</box-layout>
<box-layout background="warning">
  <nve-paragraph>warning</nve-paragraph>
</box-layout>
<box-layout background="error">
  <nve-paragraph>error</nve-paragraph>
</box-layout>

Trenger du en farge som ikke finnes blant tokenene, kan du fortsatt sette bakgrunn via style-attributtet. Foretrekk likevel background-propen for konsistens.

Nøsting

Bokser kan nøstes for å bygge opp et hierarki av padding.

<box-layout size="large" background="neutral-subtle">
  <box-layout size="small" background="info">
    <div style="padding: 0.75rem; background: var(--color-feedback-background-subtle-neutral)"></div>
  </box-layout>
</box-layout>

Eksempel på bruk

En boks med konsistent padding rundt en tekst.

<box-layout background="info">
  <nve-paragraph>Innhold med jevn padding rundt.</nve-paragraph>
</box-layout>

Samme innhold uten box-layout hvor teksten ligger helt inntil kanten.

<div style="background: var(--color-feedback-background-default-info)">
  <nve-paragraph>Innhold med null padding rundt.</nve-paragraph>
</div>

Egenskaper

Egenskap	Type	Standard	Beskrivelse
size	'none' | '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | '3x-large' | '4x-large' | '5x-large'	medium	Tokenbasert padding. Mapper til --spacing-<verdi>. Autoutfylling i editoren.
padding	string	–	Eksakt CSS-lengde ("12px", "1.25rem"). Skal ikke brukes for tokens – bruk size.
background	'none' | 'neutral' | 'neutral-subtle' | 'info' | 'info-subtle' | 'success' | 'success-subtle' | 'warning' | 'warning-subtle' | 'error' | 'error-subtle'	none	Tokenbasert bakgrunnsfarge. Mapper til --color-feedback-background-*.