Density

Preview card

Preview card composes Base UI’s preview card primitives for rich link previews that appear on hover or focus.

Preview Density
import { PreviewCard } from "density-base-ui";

export default function PreviewCardExample() {
  return (
    <PreviewCard
      trigger="Preview Density"
      title="Density"
      summary="A quiet, durable interface system for focused product work."
    >
      <div className="preview-card-example-kicker">Preview</div>
    </PreviewCard>
  );
}

Props

Prop Attribute Values Default
href None URL string None
trigger None React node title
title, summary None React node None
children None React node None
presentation data-dn-presentation button button
emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
popupPresentation data-dn-presentation card card
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1

Emphasis

import { PreviewCard } from "density-base-ui";
export default function PreviewCardEmphasisExample() {
  return (
    <div style={styles.row}>
      <PreviewCard
        emphasis="primary"
        title="Primary"
        summary="Primary trigger"
      />
      <PreviewCard
        emphasis="secondary"
        title="Secondary"
        summary="Secondary trigger"
      />
      <PreviewCard
        emphasis="outline"
        title="Outline"
        summary="Outline trigger"
      />
      <PreviewCard emphasis="ghost" title="Ghost" summary="Ghost trigger" />
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;

Size

import { PreviewCard } from "density-base-ui";
export default function PreviewCardSizeExample() {
  return (
    <div style={styles.row}>
      <PreviewCard size="2xs" title="2xs" />
      <PreviewCard size="xs" title="xs" />
      <PreviewCard size="sm" title="sm" />
      <PreviewCard size="md" title="md" />
      <PreviewCard size="lg" title="lg" />
      <PreviewCard size="xl" title="xl" />
      <PreviewCard size="2xl" title="2xl" />
      <PreviewCard size="3xl" title="3xl" />
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;

Padding

import { PreviewCard } from "density-base-ui";
export default function PreviewCardPaddingExample() {
  return (
    <div style={styles.row}>
      <PreviewCard padding="none" title="None" />
      <PreviewCard padding="2xs" title="2xs" />
      <PreviewCard padding="xs" title="xs" />
      <PreviewCard padding="sm" title="sm" />
      <PreviewCard padding="md" title="md" />
      <PreviewCard padding="lg" title="lg" />
      <PreviewCard padding="xl" title="xl" />
      <PreviewCard padding="2xl" title="2xl" />
      <PreviewCard padding="3xl" title="3xl" />
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;

Depth

import { PreviewCard } from "density-base-ui";
export default function PreviewCardDepthExample() {
  return (
    <div style={styles.row}>
      <PreviewCard depth="1" title="Depth 1" />
      <PreviewCard depth="2" title="Depth 2" />
      <PreviewCard depth="3" title="Depth 3" />
      <PreviewCard depth="4" title="Depth 4" />
      <PreviewCard depth="5" title="Depth 5" />
      <PreviewCard depth="6" title="Depth 6" />
      <PreviewCard depth="7" title="Depth 7" />
    </div>
  );
}
const styles = {
  row: { display: "flex", flexWrap: "wrap", gap: "0.5rem" },
} as const;