nve-grid

nve-grid lager et responsivt rutenett som automatisk bryter til nye linjer basert på en minste kolonnebredde.

gap er knyttet direkte til spacing-tokenene i designsystemet og sikrer at avstandene er konsistente på tvers av sider og komponenter.

Import

Layout-komponentene ligger et nivå under de andre komponentene. For å bruke disse kan du følge stien med /layout etterfulgt av komponentet du vil bruke. Eksempel:

import 'nve-designsystem/components/layouts/nve-grid/nve-grid.component.js';

Native element

Bruk as for å velge det native HTML-elementet som omslutter innholdet.

<nve-grid as="section" role="region" aria-label="Temaer"> ... </nve-grid>

Gyldige verdier for as er div, section, article, aside, nav, main, header, footer og ul.

Minste kolonnebredde

min bestemmer hvor smal en kolonne kan bli før rutenettet bryter til ny linje. Standard er 250px.

<div style="resize: horizontal; overflow: auto; max-width: 100%; min-width: 150px">
  <nve-box padding="small" background="--color-neutrals-background-canvas">
    <nve-grid min="120px">
      <div
        style="min-height: 80px; background: var(--color-feedback-background-default-info)"
      ></div>
      <div
        style="min-height: 80px; background: var(--color-feedback-background-default-info)"
      ></div>
      <div
        style="min-height: 80px; background: var(--color-feedback-background-default-info)"
      ></div>
      <div
        style="min-height: 80px; background: var(--color-feedback-background-default-info)"
      ></div>
      <div
        style="min-height: 80px; background: var(--color-feedback-background-default-info)"
      ></div>
      <div
        style="min-height: 80px; background: var(--color-feedback-background-default-info)"
      ></div>
    </nve-grid>
  </nve-box>
</div>

Mellomrom

gap setter mellomrommet mellom rutene ved bruk av et spacing-token. Hvis gap ikke er satt, brukes medium som standard.

Gyldige spacing-verdier

Følgende verdier er gyldige for gap: none, 2x-small, x-small, small, medium (default), large, x-large, 2x-large, 3x-large, 4x-large og 5x-large.

<nve-box padding="small" background="--color-neutrals-background-canvas">
  <nve-grid gap="small" min="64px">
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
  </nve-grid>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
  <nve-grid min="64px">
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
  </nve-grid>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
  <nve-grid gap="large" min="64px">
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
    <div
      style="min-height: 80px; background: var(--color-feedback-background-default-info)"
    ></div>
  </nve-grid>
</nve-box>

Eksempel på bruk

Et responsivt rutenett med navigasjonskort som tilpasser antall kolonner etter tilgjengelig plass.

<nve-grid gap="small">
  <nve-link-card href="#" label="Flom og skred" size="small"></nve-link-card>
  <nve-link-card href="#" label="Vassdrag og miljø" size="small"></nve-link-card>
  <nve-link-card href="#" label="Energi" size="small"></nve-link-card>
  <nve-link-card href="#" label="Klima" size="small"></nve-link-card>
  <nve-link-card href="#" label="Konsesjon" size="small"></nve-link-card>
  <nve-link-card href="#" label="Tilsyn" size="small"></nve-link-card>
</nve-grid>

Egenskaper

Egenskap	Type	Standard	Beskrivelse
as	LayoutElementTag	div	Native HTML-element som omslutter innholdet, for eksempel section.
min	string	250px	Minste kolonnebredde før rutenettet bryter til ny linje (f.eks. 250px eller 16rem).
gap	SpacingToken	medium	Tokenbasert mellomrom mellom kolonner og rader.
padding	SpacingToken	—	Tokenbasert padding på alle sider.
padding-block	SpacingToken	—	Overstyrer padding i blokk-retning (topp/bunn).
padding-inline	SpacingToken	—	Overstyrer padding i inline-retning (venstre/høyre).
margin	SpacingToken	—	Tokenbasert margin på alle sider.
margin-block	SpacingToken	—	Overstyrer margin i blokk-retning (topp/bunn).
margin-inline	SpacingToken	—	Overstyrer margin i inline-retning (venstre/høyre).