Density

PreviewCard

PreviewCard composes Base UI’s preview card primitives for rich link previews that appear on hover or focus from a consumer-owned trigger element.

import { Button, PreviewCard, Skeleton, View } from "density-base-ui";

export default function PreviewCardExample() {
  return (
    <PreviewCard
      trigger={<Button>Preview Density</Button>}
      title="Density"
      subtitle="A quiet, durable interface system for focused product work."
    >
      <View padding={false} style={{ marginTop: "0.5rem", width: "16rem" }}>
        <Skeleton style={{ width: "5rem" }} />
        <Skeleton style={{ width: "100%" }} />
      </View>
    </PreviewCard>
  );
}

Dismiss control

Set dismissable to show a Close control. Handle onDismiss to remove the preview from its owner.

import { Button, PreviewCard, Skeleton } from "density-base-ui";

export default function PreviewCardDismissableExample() {
  return (
    <PreviewCard
      dismissable
      onDismiss={() => undefined}
      trigger={<Button>Preview Density</Button>}
      title="Density"
    >
      <Skeleton style={{ height: "3rem", width: "12rem" }} />
    </PreviewCard>
  );
}

Padding

NonePadding enabled
import { PreviewCard, Skeleton, View, Label } from "density-base-ui";

export default function PreviewCardPaddingExample() {
  return (
    <View orientation="horizontal" padding={false} wrap>
      <PreviewCard padding={false} trigger={<Label>None</Label>}>
        <Skeleton style={{ width: "10rem" }} />
      </PreviewCard>
      <PreviewCard
        trigger={<Label>Padding enabled</Label>}
        title="Padding enabled"
        subtitle="Preview card content with padding."
      >
        <Skeleton style={{ width: "10rem" }} />
      </PreviewCard>
    </View>
  );
}