Inset / Bleed / Frame

Bleeds content (usually media) to the edges of a padded card by cancelling the card's padding. Set `--card-pad` on the card (defaults to 1rem) and pick the edges to bleed.

Import

import { Inset } from '@marbleui/ui'

Props

<Inset>

Prop	Type	Default	Description
clip	`boolean`	`true`
side	`'all' \| 'bottom' \| 'top' \| 'x'`	`'top'`

Also accepts HTML element props (278).

Usage notes

Lets media or a full-width band inside a padded card reach the card’s edges by cancelling its padding with negative margins. Set --card-pad on the card to match its padding.

<article className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-4 [--card-pad:1rem]">
  <Inset><img src="/launch-recap.jpg" alt="Team on stage at the product launch" /></Inset>
  <h3 className="font-semibold">Launch recap</h3>
</article>

side is top (default: top and sides), bottom (bottom and sides), x (sides only, for a band mid-card) or all.
--card-pad defaults to 1 rem and applies to both axes, so the card needs equal padding on every side. Card itself has no padding (its slots do), so media placed directly in a Card already spans its width.
It copies the card’s corner radius, so make it a direct child of the card. clip (default true) clips content to those corners.

Example source · show

import { Inset } from './inset'

const Media = ({ h }: { h: number }) => <div className="h-36" style={{ background: `linear-gradient(135deg, var(--chart-${h}), color-mix(in oklab, var(--chart-${h}) 40%, var(--surface)))` }} />
const Card = ({ children }: { children: React.ReactNode }) => <article className="flex w-64 flex-col gap-3 rounded-2xl border border-border bg-surface p-4 [--card-pad:1rem]">{children}</article>
export const styles = {
  Top: () => <Card><Inset><Media h={1} /></Inset><h3 className="font-semibold text-fg">Edge-to-edge media</h3><p className="text-sm text-fg-muted">The image ignores card padding; text keeps it.</p></Card>,
  'Middle (x)': () => <Card><h3 className="font-semibold text-fg">Chart</h3><Inset side="x"><Media h={6} /></Inset><p className="text-sm text-fg-muted">Full-width band inside the card.</p></Card>,
}

Source: packages/ui/src/inset/inset.tsx

Catalog