import { MDXLayoutNext } from '@/components';
import { CardExamples } from '@/components/card';

export const meta = {
  templateTitle: 'Card',
  description: 'Card component | Fluid Design',
  date: '2023-02-01',
  author: 'Oliver Pan',
  tags: [
    'fluid ui',
    'react',
    'framer motion',
    'headless ui',
    'tailwindcss',
    'card',
  ],
};

export default (props) => (
  <MDXLayoutNext meta={meta} components={CardExamples} {...props} />
);

# Card

## Standard

<CodeFrame title='Standard'>
  <CardExamples.Standard />
</CodeFrame>

```jsx
import { Button } from '@fluid-design/fluid-ui';
import { HeartIcon, ShareIcon } from '@heroicons/react/24/outline';
import clsx, { ClassValue } from 'clsx';
import Image from 'next/image';
import { twMerge } from 'tailwind-merge';

/** Merge classes with tailwind-merge with clsx full feature */
function clsxm(...classes: ClassValue[]) {
  return twMerge(clsx(...classes));
}

export const CardStandardComponent = ({ src = undefined, ...props }) => {
  const contrastRing = `contrast-more:border contrast-more:border-gray-800 dark:contrast-more:border-gray-200`;
  return (
    <div
      className={clsxm(
        `component card-bg flex w-full max-w-xs translate-x-0 transform flex-col overflow-hidden rounded-xl bg-gray-50 shadow  dark:bg-gray-900 dark:contrast-more:bg-black`,
        contrastRing,
        props.className ? props.className : `aspect-[1/1.15]`
      )}
    >
      <div className='h-full'>
        <div className='pointer-events-none relative h-full w-full select-none overflow-hidden'>
          <Image
            alt='Sunrise in the national park Gantrisch in Bern, Switzerland. By Alain from Unsplash.'
            src={
              src
                ? src
                : `https://images.unsplash.com/photo-1612993239130-c5e816a63d8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80`
            }
            objectFit='cover'
            layout='fill'
          />
        </div>
      </div>
      <div className='flex h-full flex-grow flex-col px-4 pt-4 pb-2'>
        <div className='flex-grow'>
          <h2 className='text-xs text-gray-500 contrast-more:font-bold contrast-more:text-gray-700 dark:text-gray-500 dark:contrast-more:text-gray-300'>
            France
          </h2>
          <h1 className='font-semibold contrast-more:font-bold dark:text-gray-100'>
            Chamonix Centre-ville
          </h1>
          <p className='pt-1.5 pb-2 text-sm leading-tight text-gray-600 contrast-more:font-medium contrast-more:text-gray-900 dark:text-gray-300 dark:contrast-more:text-gray-100'>
            A photo shot by Guillaume Marques on Unsplash.
          </p>
        </div>
        <div className='flex items-center justify-between pt-1'>
          <Button size='xs' weight='light' color='blue'>
            {t(`Card Button`, { ns: 'card' })}
          </Button>
          <div className='-mr-2 flex'>
            <Button weight='clear' color='sky' shape='pill' iconOnly>
              <span className='sr-only'>Share this post</span>
              <ShareIcon className='h-5 w-5' />
            </Button>
            <Button weight='clear' color='rose' shape='pill' iconOnly>
              <span className='sr-only'>Fav this post</span>
              <HeartIcon className='h-5 w-5' />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardStandardComponent;
```

## Apple App Store

<CodeFrame title='Standard'>
  <CardExamples.AppleStore />
</CodeFrame>

## Collage

<CodeFrame title='Collage'>
  <CardExamples.Collage />
</CodeFrame>