Demo

Med marginInline=full kan du få enkeltelementer til å dekke hele skjermbredden mens resten av innholdet følger bredden satt av parent-container som vanlig. OBS: Du må kanskje sette 'overflow-x: hidden' på body for å unngå horisontal scrollbar.

Full

Directions

Både marginBlock og marginInline er reponsive, slik at du kan sette negativ margin dynamisk basert på brekkpunkter.

Responsive

Reflective padding

Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer antall DOM-noder og forenkler output. [Les mer om asChild her](https://aksel.nav.no/grunnleggende/kode/layout-primitives#613715c234c8).

As child

Noen ganger er det den ene pixelen som skal til for å optisk sentrere elementer.

Optical alignment

primitive-bleed

Kode-eksempler

Bleed legger til negativ margin gjennom bruk av propen 

. Disse følger tokens for spacing, men har i tillegg to ekstra muligheter: 

 for å strekke seg helt ut i kanten av siden. I noen tilfeller vil du måtte sette 

 på body for å unngå horisontal scrollbar. 

 er lagt til som en enkel metode for å optisk justere elementer, noe du kan 

 erstatter den negative marginen med padding. Dette kan være nyttig i tilfeller der du ønsker at bakgrunnen til elementet skal gå helt ut i kantene, men innholdet skal forbli der det var før du la på Bleed.

, som gjør at komponenten rendrer som nærmeste child-element. 

**Negative** horizontal margin around children.
Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
or an object of spacing tokens for different breakpoints.

The `px` value is useful to nudge by just 1px.
The `full` value is used to extend the margin to the full width of the parent.

marginInline

**Negative** vertical margin around children.
Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
or an object of spacing tokens for different breakpoints.

The `px` value is useful to nudge by just 1px.
This prop does **not** accept the `full` value.

marginBlock

When true, set the padding to mirror the margin.
This maintains the apparent width of the element prior to adding Bleed.
When this is used with `asChild`, it will overwrite the padding of the child.

reflectivePadding

When true, the Bleed will render as its child. This merges classes, styles and event handlers.

asChild

className

Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
[React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)

Bleed

Props

. Denne komponenten legger til negativ margin som lar innhold "blø" ut av sin parent.

Bleed

Egnet til:

Uegnet til:

Eksempler

Margin

Full

Px

Reflective padding

As child

Props

Bleed

marginInline?

marginBlock?

reflectivePadding?

asChild?

className?

ref?

Bleed

Intro

Egnet til:

Uegnet til:

Eksempler

Margin

Full

Px

Reflective padding

As child

Props

Bleed

marginInline?

marginBlock?

reflectivePadding?

asChild?

className?

ref?