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.
| Name | Description | Default | Control |
|---|---|---|---|
| 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
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.
Test dashboard
Multiple Metadata With Custom Separator
The separator for multiple metadata elements defaults to a vertical line |, but can be customised.
Test dashboard
As A Link
Card can be used as a clickable link item by specifying href prop.
Redirect to Grafana
Clicking this card will redirect to grafana website
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.
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.
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.
Selectable
Option #1
This is a really great option, you will not regret it.
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.