Used to show a single card or a group of cards.

### Cards in a non-white background do not have borders
```jsx
import Cards from './cards';
import Icon from '../icon';
const titles = ["Saas guide", "Free recipes", "Design eBook"];
const visits = () => Math.floor(Math.random() * 10000);
const subs = (v) => v - Math.floor(Math.random() * v);
const conversion = (s, v) => ((s / v) * 100).toFixed(2);

<Cards>
  {
    titles.map(title => (
      <Card key={title}>
        <div className="flex justify-between items-start mr-2">
          <div className="flex align-items">
            <Icon
              name="landing-page"
              className="text-blue-500 text-3xl mr-4"
            />
            <a
              href="#"
              className="text-lg text-blue-500 font-semibold"
            >
              {title}
            </a>
          </div>
          <Icon
            name="menu-horizontal"
            className="text-gray-700 text-3xl hover:text-gray-800 cursor-pointer"
          />
        </div>
        <div className="mt-8 pr-8 flex justify-between">
          <div className="w-1/4">
            <span className="block font-semibold text-gray-800">
              {visits()}
            </span>
            <span className="block text-xs text-gray-700 uppercase">
              Visitors
            </span>
          </div>
          <div className="w-1/4">
            <span className="block font-semibold text-gray-800">
              {subs(visits())}
            </span>
            <span className="block text-xs text-gray-700 uppercase">
              Subscribers
            </span>
          </div>
          <div className="w-1/4">
            <span className="block font-semibold text-gray-800">
              {conversion(subs(visits()), visits())}%
            </span>
            <span className="block text-xs text-gray-700 uppercase">
              Visitors
            </span>
          </div>
        </div>
      </Card>
    ))
  }
</Cards>
```

### Cards in a white background have borders
```jsx
import Cards from './cards';
import Icon from '../icon';
const titles = ["Saas guide", "Free recipes", "Design eBook"];
const visits = () => Math.floor(Math.random() * 10000);
const subs = (v) => v - Math.floor(Math.random() * v);
const conversion = (s, v) => ((s / v) * 100).toFixed(2);

<div class="bg-white p-4">
<Cards>
  {
    titles.map(title => (
      <Card key={title} border>
        <div className="flex justify-between items-start mr-2">
          <div className="flex align-items">
            <Icon
              name="landing-page"
              className="text-blue-500 text-3xl mr-4"
            />
            <a
              href="#"
              className="text-lg text-blue-500 font-semibold"
            >
              {title}
            </a>
          </div>
          <Icon
            name="menu-horizontal"
            className="text-gray-700 text-3xl hover:text-gray-800 cursor-pointer"
          />
        </div>
        <div className="mt-8 pr-8 flex justify-between">
          <div className="w-1/4">
            <span className="block font-semibold text-gray-800">
              {visits()}
            </span>
            <span className="block text-xs text-gray-700 uppercase">
              Visitors
            </span>
          </div>
          <div className="w-1/4">
            <span className="block font-semibold text-gray-800">
              {subs(visits())}
            </span>
            <span className="block text-xs text-gray-700 uppercase">
              Subscribers
            </span>
          </div>
          <div className="w-1/4">
            <span className="block font-semibold text-gray-800">
              {conversion(subs(visits()), visits())}%
            </span>
            <span className="block text-xs text-gray-700 uppercase">
              Visitors
            </span>
          </div>
        </div>
      </Card>
    ))
  }
</Cards>
</div>
```

### Promo card

```jsx
import Button from "../button";
<Card className="text-center w-64 py-8" border>
  <p className="text-gray-700 text-sm mb-2">
    Upgrade your account for
  </p>
  <p className="mb-4">
    <span className="text-gray-800 text-2xl font-semibold">$199</span>
    <span className="text-gray-700 text-base ml-1">/mo</span>
  </p>
  <p className="text-gray-700 text-base mb-6">
    Access features instantly
    <br />
    Money-back guarantee
  </p>
  <Button is="primary">Purchase expansion pack</Button>
</Card>
```

### Inline card

```jsx
import Badge from "../badge";
<Card className="my-4 flex justify-between" border>
  <div className="inline-flex items-center mr-2">
    <Badge className="mr-4">Pro</Badge>
    <p className="text-sm text-gray-700 font-medium">
      You are subscribed to the Pro add-on
    </p>
  </div>
  <a
    href="#"
    className="text-sm text-gray-700 hover:text-gray-800 hover:underline"
  >
    Cancel add-on
  </a>
</Card>
```