import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as CardStories from "./Card.stories";

<Meta of={CardStories} />

# Cards

A Card component in design systems is a versatile UI element used to encapsulate content and actions about a single subject. It serves as a modular container that can include images, text, links, buttons, and other interactive elements. Cards are designed to present information in a concise and organized manner, making it easier for users to scan and interact with multiple pieces of content.

## Usage

<Canvas of={CardStories.Documentation} source={ { code: `
import React from 'react';
import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";

const CardExample = () => {
return (

<Card
  title="Card title"
  description="Card description"
  padding="standard"
  elevation="sm"
  borderRadius="md"
  actions={
    <>
      <Button variant="secondary" text="Cancel" />
      <Button variant="primary" text="Confirm" />
    </>
  }
  options={
    <IconButton
      variant={"ghost"}
      icon={<Icon icon={<MoreVertical />} label={"More options"} />}
      size={"sm"}
      iconSize={"lg"}
      onClick={() => alert("Custom action button clicked.")}
    />
  }
>
  This is card content. Anything can go in here.
</Card>
); };

    export default CardExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Card/Card.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={CardStories.Documentation} />

```tsx
import React from "react";
import { Card, Button, IconButton, Icon } from "@webiny/admin-ui";
import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";

const CardExample = () => {
  return (
    <Card
      title="Card title"
      description="Card description"
      padding="standard"
      elevation="sm"
      borderRadius="md"
      actions={
        <>
          <Button variant="secondary" text="Cancel" />
          <Button variant="primary" text="Confirm" />
        </>
      }
      options={
        <IconButton
          variant={"ghost"}
          icon={<Icon icon={<MoreVertical />} label={"More options"} />}
          size={"sm"}
          iconSize={"lg"}
          onClick={() => alert("Custom action button clicked.")}
        />
      }
    >
      This is card content. Anything can go in here.
    </Card>
  );
};

export default CardExample;
```

## Anatomy

### Construction

Depending on the content type and card usage, there are several elevation options available.

<img src="/images/storybook/card/construction.png" alt="Construction" />

### Elevation

<img src="/images/storybook/card/elevation.png" alt="Elevation" />

### Radius

Depending on the content type and card usage, there are three basic paddings options to consider. Border radius can vary from 4px - 12px

<img src="/images/storybook/card/radius.png" alt="Radius" />

### Padding

<img src="/images/storybook/card/padding.png" alt="Padding" />

## Usage

### Stacked

<img src="/images/storybook/card/stacked.png" alt="Stacked" />