Card

Sizes

Large

<Card size="large" variant="{image, info or text}" imageProps={{ src: "/photos/photo4.jpg", alt: "Hello"}} iconShape="FaArrowRight">
  <CardTitle trumpet="Trumpet" linkAs={a} href="/">Title</CardTitle>
  <CardDescription>Description</CardDescription>
  <CardSplash>
    Some extra content
    <br />
    <strong>here</strong>
  </CardSplash>
</Card>

TrumpetTitle

Description

Some extra content

here

Medium

<Card size="medium" variant="{image, info or text}" imageProps={{ src: "/photos/photo4.jpg", alt: "Hello"}} iconShape="FaArrowRight">
  <CardTitle trumpet="Trumpet" href="/">Title</CardTitle>
  <CardDescription>Description</CardDescription>
</Card>

TrumpetTitle

Description

Small

<Card size="small" variant="{image, info or text}" imageProps={{ src: "/photos/photo4.jpg", alt: "Hello"}} iconShape="FaArrowRight">
  <CardTitle trumpet="Trumpet" href="/">Title</CardTitle>
</Card>

TrumpetTitle

Compact

<Card size="compact" variant="{image, info or text}" imageProps={{ src: "/photos/photo4.jpg", alt: "Hello"}} iconShape="FaArrowRight">
  <CardTitle trumpet="Trumpet" href="/">Title</CardTitle>
</Card>

TrumpetTitle