Card

<Card
  constraints={{ maxWidth: 850 }}
  info={{
    title: "Masked Booby",
    body: "Apparatus causa nostrum minima defessus sol aro. Civitas ultra statim necessitatibus comminor tepesco. Volva aer termes cohors veritatis crux.",
  }}
/>

<Card
  constraints={{ maxWidth: 850 }}
  media={
    <Image
      src="https://picsum.photos/seed/jOLC4DY/3233/1477?blur=9"
      aspectRatio="16:9"
    />
  }
  info={{
    title: "Steller's Sea-Eagle",
    body: "Abundans aegrotatio depraedor suppellex doloribus dolorum. Voveo pecto celer nihil delego. Auxilium strenuus aro nostrum caveo molestias.",
  }}
/>

<Card
  constraints={{ maxWidth: 850 }}
  info={{
    title: "Crescent-chested Warbler",
    body: "Decor tunc conqueror aegrotatio tabgo demulceo admiratio cumque. Tubineus repudiandae ad spectaculum coepi venia tonsor repellendus. Vinco pectus appositus adimpleo caelum deputo sit porro ab uredo.",
    actions: (
      <ButtonGroup>
        <Button variant="primary" grow={1}>
          Flesh-footed Shearwater
        </Button>
        <Button variant="secondary" grow={1}>
          Fork-tailed Storm-Petrel
        </Button>
      </ButtonGroup>
    ),
  }}
/>

<Card
  constraints={{ maxWidth: 850 }}
  info={{
    title: "Yellow-throated Vireo",
    body: "Provident concedo vitium umbra triumphus carus explicabo usitas. Nulla ulterius speculum voluptatum degero. Ustulo defluo amiculum acidus aurum tenetur absconditus fugit.",
  }}
  onClick={() => alert("Card clicked!")}
/>

<Card
  as={PlainLink}
  constraints={{ maxWidth: 850 }}
  href="https://codedazur.com"
  target="_blank"
  info={{
    title: "Yucatan Vireo",
    body: "Comminor collum debeo temptatio corroboro tandem. Accusator maiores delectatio. Comparo peior claudeo audax.",
  }}
/>