Inset

Card layout helper component that bleeds content to container edges using negative margin scale math.

// Plain markup
import { Inset } from "@shavin/ui";

side="top" — image bleeding to the top edge

Card title

Body copy sits within the card's normal padding while the image above bleeds to the edges.

<Card padding="sm" className="w-72">
  <Inset side="top" p="sm" clip>
    <AspectRatio ratio={16 / 9}>
      <img src="/assets/hq_marshall.jpg" alt="Marshall photography" className="h-full w-full object-cover" />
    </AspectRatio>
  </Inset>
  <div className="pt-4">
    <Text weight="semibold">Card title</Text>
    <Text color="muted" className="mt-1">
      Body copy sits within the card's normal padding while the
      image above bleeds to the edges.
    </Text>
  </div>
</Card>

side="all" — full bleed block

full bleed

<Card padding="md" className="w-64">
  <Inset side="all" p="md" clip>
    <div className="flex h-32 items-center justify-center bg-surface-hover text-sm text-fg-muted">
      full bleed
    </div>
  </Inset>
</Card>

side="x" — bleed only left/right

Some intro text, normal padding.

More content below.

<Card padding="sm" className="w-72">
  <div className="pb-3 text-sm text-fg-muted">Some intro text, normal padding.</div>
  <Inset side="x" p="sm">
    <div className="h-16 bg-surface-hover" />
  </Inset>
  <div className="pt-3 text-sm text-fg-muted">More content below.</div>
</Card>

Props

Prop	Type	Default
clip	boolean	—
p	"sm" \| "md"	"sm"
side	"all" \| "top" \| "bottom" \| "x"	"all"