No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Card

Generic card component

Filter by name

Filter data by query. This is useful if you are sharing the results from a different panel that has many queries and you want to only visualize a subset of that in this panel.

NameDescriptionDefaultControl
disabled
Indicates if the card and all its actions can be interacted with
boolean
-
isSelected
Makes the card selectable, set to "true" to apply selected styles
boolean
-
isCompact
If true, the padding of the Card will be smaller
boolean
-

Stories

Basic

A basic Card component expects at least a heading, used as a title.

Filter by name

Filter data by query. This is useful if you are sharing the results from a different panel that has many queries and you want to only visualize a subset of that in this panel.

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.

Test dashboard

Folder: Test|Views: 100

Complex Metadata Elements

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.

Multiple Metadata With Custom Separator

The separator for multiple metadata elements defaults to a vertical line |, but can be customised.

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.

Test dashboard

Card with a list of tags

As A Button

Card can be used as a clickable buttons item by specifying onClick prop. Note: When used in conjunction with Metadata elements, clicking on any element inside <Card.Meta> will prevent the card action to be executed (either href to be followed or onClick to be called).

Clicking this card will create an alert

Inside A List Item

To render cards in a list, it is possible to nest them inside li items.

  • List card item

    Card that is rendered inside li element.

  • List card item

    Card that is rendered inside li element.

  • List card item

    Card that is rendered inside li element.

  • List card item

    Card that is rendered inside li element.

With Media Elements

Cards can also be rendered with media content such icons or images. Such elements need to be wrapped in Card.Figure component.

1-ops-tools1-fallback

Grafana Logo

Action Cards

Cards also accept primary and secondary actions. Usually the primary actions are displayed as buttons while secondary actions are displayed as icon buttons. The actions need to be wrapped in Card.Actions and Card.SecondaryActions components respectively.

1-ops-tools1-fallback

Prometheus Logo

Disabled State

Card can have a disabled state, effectively making it and its actions non-clickable. If there are any actions, they will be disabled instead of the whole card.

1-ops-tools1-fallback

Grafana Logo

Selectable

Option #1

This is a really great option, you will not regret it.

Grafana Logo

Full

Card title

Description, body text. Greetings! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Subtitle|Meta info 1|Meta info 2|https://ops-us-east4.grafana.net/api/prom
Prometheus Logo