import { Meta, Preview, Props } from "@storybook/addon-docs/blocks";
import { Card } from "./Card";
import { Button } from '../Button';
import { IconButton } from '../IconButton/IconButton';
import {TagList} from '../Tags/TagList';
export const logo = 'https://grafana.com/static/assets/img/apple-touch-icon.png'
# Card
## Usage
### Basic
A basic `Card` component expects at least a heading, used as a title.
```jsx
```
### Multiple metadata elements
For providing metadata elements, which can be any extra information for the card, `Card.Meta` component should be used. If metadata consists of multiple strings, each of them has to be escaped (wrapped in brackets `{}`) or better passed in as an array.
```jsx
{['Folder: Test', 'Views: 100']}
```
{['Folder: Test', 'Views: 100']}
Metadata also accepts HTML elements, which could be links, for example. For elements, that are not strings, a `key` prop has to be manually specified.
```jsx
Grafana
https://ops-us-east4.grafana.net/api/prom
```
Grafana
https://ops-us-east4.grafana.net/api/prom
The separator for multiple metadata elements defaults to a vertical line `|`, but can be customised.
```jsx
Grafana
https://ops-us-east4.grafana.net/api/prom
```
Grafana
https://ops-us-east4.grafana.net/api/prom
### Tags
Tags can be rendered inside the Card, by being wrapped in `Card.Tags` component. Note that this component does not provide any tag styling and that should be handled by the children. It is recommended to use it with Grafana-UI's `TagList` component.
```jsx
console.log(tag)} />
```
console.log(tag)} />
### As a link
Card can be used as a clickable link item by specifying `href` prop. In this case the Card's content will be rendered inside `a`.
```jsx
```
### Inside a list item
To render cards in a list, it is possible to nest them inside `li` items.
```jsx