CardWithImageSmall() — ui Function Reference

Architecture documentation for the CardWithImageSmall() function in card-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ CardWithImageSmall() — ui Function Reference

Dependency Diagram

graph TD
  7522be92_c577_06a4_bdef_82604ceeb4ef["CardWithImageSmall()"]
  ee714589_8224_8ab3_9e79_b7337e5a44b1["card-example.tsx"]
  7522be92_c577_06a4_bdef_82604ceeb4ef -->|defined in| ee714589_8224_8ab3_9e79_b7337e5a44b1
  style 7522be92_c577_06a4_bdef_82604ceeb4ef fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/card-example.tsx lines 200–233

function CardWithImageSmall() {
  return (
    <Example title="With Image (Small)">
      <Card size="sm" className="relative mx-auto w-full max-w-sm pt-0">
        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
        <img
          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Photo by mymind on Unsplash"
          title="Photo by mymind on Unsplash"
          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
        />
        <CardHeader>
          <CardTitle>Beautiful Landscape</CardTitle>
          <CardDescription>
            A stunning view that captures the essence of natural beauty.
          </CardDescription>
        </CardHeader>
        <CardFooter>
          <Button size="sm" className="w-full">
            <IconPlaceholder
              lucide="PlusIcon"
              tabler="IconPlus"
              hugeicons="Add01Icon"
              phosphor="PlusIcon"
              remixicon="RiAddLine"
              data-icon="inline-start"
            />
            Button
          </Button>
        </CardFooter>
      </Card>
    </Example>
  )
}