Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

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 9. mai 2025
GithubEndringslogg

Egnet til:

  • Ignorere 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 to ekstra muligheter: full og px.

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.

Px

px er lagt til som en enkel metode for å optisk justere elementer, noe du kan lese mer om fra Slava Shestopalov.

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 px" | "full 0" | "full 05" | "full 1" | "full 1-alt" | "full 2" | "full 3" | "full 4" | "full 5" | "full 6" | ... 2013 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 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.

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

marginBlock?

  • Type:
    ResponsiveProp<"px px" | "px 0" | "px 05" | "px 1" | "px 1-alt" | "px 2" | "px 3" | "px 4" | "px 5" | "px 6" | "px 7" | "px 8" | "px 9" | "px 10" | "px 11" | "px 12" | "px 14" | "px 16" | "px 18" | ... 1917 more ... | BleedSpacingBlock>
  • Description:

    Negative vertical margin around children. Accepts a spacing token 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.

  • Example:
    marginBlock='space-16'marginBlock='space-16 space-20'marginBlock={{xs: '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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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