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:
javascript
import 'nve-designsystem/components/layouts/nve-grid/nve-grid.component.js';Minste kolonnebredde
min bestemmer hvor smal en kolonne kan bli før rutenettet bryter til ny linje. Standard er 250px.
html
<div style="resize: horizontal; overflow: auto; max-width: 100%; min-width: 150px">
<nve-grid min="120px" style="background: var(--color-feedback-background-subtle-neutral); padding: 0.5rem">
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
</nve-grid>
</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.
html
<nve-grid gap="small" min="80px" style="background: var(--color-feedback-background-subtle-neutral); padding: 0.5rem">
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
</nve-grid>
<nve-grid min="80px" style="background: var(--color-feedback-background-subtle-neutral); padding: 0.5rem">
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
</nve-grid>
<nve-grid gap="large" min="80px" style="background: var(--color-feedback-background-subtle-neutral); padding: 0.5rem">
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
<div
style="min-height: 80px; background: var(--color-feedback-background-default-info); border: 4px solid var(--color-feedback-background-subtle-neutral)"
></div>
</nve-grid>Eksempel på bruk
Et responsivt rutenett med navigasjonskort som tilpasser antall kolonner etter tilgjengelig plass.
html
<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 |
|---|---|---|---|
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). |