feat(content): Add example Card with image with alt text

Also renames the existing `Card with image` example
to `Card with decorative image` to more clearly
indicate `alt` text *should* be provided if the
image is *not* purely decorative.

src/components/Card/index.tsx

@@ -2,13 +2,13 @@ import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
 export type CardProps = PropsWithChildren<{
-  alt?: string;
   className?: string;
   horizontal?: boolean;
+  imgAlt?: string;
   imgSrc?: string;
 }>;
 
-export const Card: FC<CardProps> = ({ alt, children, className, horizontal, imgSrc }) => {
+export const Card: FC<CardProps> = ({ imgAlt, children, className, horizontal, imgSrc }) => {
   return (
     <div
       className={classNames(
@@ -27,7 +27,7 @@ export const Card: FC<CardProps> = ({ alt, children, className, horizontal, imgS
             'h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg': horizontal,
           })}
           src={imgSrc}
-          alt={alt ?? ''}
+          alt={imgAlt ?? ''}
         />
       )}
       <div className="flex h-full flex-col justify-center gap-4 p-6">{children}</div>

src/pages/CardPage.tsx

@@ -20,7 +20,7 @@ const CardPage: FC = () => {
       codeClassName: 'dark:!bg-gray-900',
     },
     {
-      title: 'Card with image',
+      title: 'Card with decorative image',
       code: (
         <Card className="max-w-sm" imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg">
           <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -33,6 +33,24 @@ const CardPage: FC = () => {
       ),
       codeClassName: 'dark:!bg-gray-900',
     },
+    {
+      title: 'Card with image with alt text',
+      code: (
+        <Card
+          className="max-w-sm"
+          imgAlt="Meaningful alt text for an image that is not purely decorative"
+          imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg"
+        >
+          <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+            Noteworthy technology acquisitions 2021
+          </h5>
+          <p className="font-normal text-gray-700 dark:text-gray-400">
+            Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+          </p>
+        </Card>
+      ),
+      codeClassName: 'dark:!bg-gray-900',
+    },
     {
       title: 'Horizontal card',
       code: (