Hopp til innhold
Aksel

Komponenter

Bleed

Bleed er en av våre layout primitives. Denne komponenten legger til negativ margin som lar innhold "blø" ut av sin parent.

StabilOppdatert 29. mai 2026
GithubEndringslogg

Egnet til:

  • Oppheve padding fra parent-element.
  • 1px optisk alignment.

Uegnet til:

  • Oppbygging av større side-layout (se Page og HGrid).
  • Header og footer.

Eksempler

Margin

Bleed legger til negativ margin gjennom bruk av propen marginBlock eller marginInline. Disse følger tokens for spacing, men har i tillegg én ekstra mulighet: full.

Full

full bruker teknikken calc((100vw - 100%)/-2) for å strekke seg helt ut i kanten av siden. I noen tilfeller vil du måtte sette overflow-x: hidden på body for å unngå horisontal scrollbar.

Reflective padding

reflectivePadding 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.

As child

Vi anbefaler å bruke asChild, som gjør at komponenten rendrer som nærmeste child-element. Les mer om asChild.

Props

Bleed

marginInline?

  • Type:
    ResponsiveProp<BleedSpacingInline | "full full" | "full space-0" | "full space-1" | "full space-2" | "full space-4" | "full space-6" | "full space-8" | "full space-12" | ... 520 more ... | "space-128 space-128">
  • Description:

    Negative horizontal margin around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

    The full value is used to extend the margin to the full width of the parent.

  • Example:
    marginInline='space-16'
    marginInline='space-16 space-20'
    marginInline={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}

marginBlock?

  • Type:
    ResponsiveProp<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 more ... | "space-128 space-128">
  • Description:

    Negative vertical margin around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

    This prop does not accept the full value.

  • Example:
    marginBlock='space-16'
    marginBlock='space-16 space-20'
    marginBlock={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}

reflectivePadding?

  • Type:
    boolean
  • Description:

    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.

asChild?

  • Type:
    boolean
  • Description:

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

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLDivElement>
  • Description:

    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