Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - card
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
<div class="card-heading">Redirect to Grafana</div> <div class="card-description">Clicking this card will redirect to grafana website</div> </div> <h3>As a button</h3> <p>Card can be used as a clickable button item by specifying onClick prop.</p> <div class="card" onclick="alert('Hello, Grafana!')"> <div class="card-heading">Hello, Grafana</div> <div class="card-description">Clicking this card will create an alert</div> </div> <div class="card" onclick="alert('Hello, Grafana!')"> <div class="card-heading">Hello, Grafana</div> <div class="card-meta" onclick="event.stopPropagation()">Clicking on this text (Meta) WILL NOT trigger the alert!</div> <div class="card-description">Clicking on this text (Description) WILL trigger the alert!</div> </div> <h3>Inside a list item</h3> <p>To render cards in a list, it is possible to nest them inside li items.</p> <ul class="card-list"> <li> <div class="card"> <div class="card-heading">List card item</div> <div class="card-description">Card that is rendered inside li element.</div> </div> </li> <li> <div class="card"> <div class="card-heading">List card item</div> <div class="card-description">Card that is rendered inside li element.</div> </div> </li> <li> <div class="card"> <div class="card-heading">List card item</div> <div class="card-description">Card that is rendered inside li element.</div> </div> </li> <li> <div class="card"> <div class="card-heading">List card item</div> <div class="card-description">Card that is rendered inside li element.</div> </div> </li> </ul> <h3>With media elements</h3> <p>Cards can also be rendered with media content such as icons or images.</p> <div class="card"> <div class="card-heading">1-ops-tools1-fallback</div> <div class="card-figure"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzE5NzFGRiIvPgo8cGF0aCBkPSJNMjAgMTBMMjYgMjBIMTRMMjAgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjAgMzBMMTQgMjBIMjZMMjAgMzBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=" alt="Grafana Logo" width="40" height="40" /> </div> <div class="card-meta"> Grafana | <a href="https://ops-us-east4.grafana.net/api/prom">https://ops-us-east4.grafana.net/api/prom</a> </div> </div> <h3>Action cards</h3> <p>Cards also accept primary and secondary actions.</p> <div class="card"> <div class="card-secondary-actions"> <button class="icon-btn" title="Show all dashboards for this data source">⊞</button> <button class="icon-btn" title="Delete this data source">🗑</button> </div> <div class="card-heading">1-ops-tools1-fallback</div> <div class="card-meta"> Grafana | <a href="https://ops-us-east4.grafana.net/api/prom">https://ops-us-east4.grafana.net/api/prom</a> </div> <div class="card-figure"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzE5NzFGRiIvPgo8cGF0aCBkPSJNMjAgMTBMMjYgMjBIMTRMMjAgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjAgMzBMMTQgMjBIMjZMMjAgMzBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=" alt="Grafana Logo" width="40" height="40" /> </div> <div class="card-actions"> <button class="btn">Settings</button> <button class="btn">Explore</button> </div> </div> <h3>Disabled state</h3> <p>Card can have a disabled state, effectively making it and its actions non-clickable.</p> <div class="card disabled"> <div class="card-heading">1-ops-tools1-fallback</div> <div class="card-meta"> Grafana | <a href="https://ops-us-east4.grafana.net/api/prom">https://ops-us-east4.grafana.net/api/prom</a> </div> <div class="card-figure"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzE5NzFGRiIvPgo8cGF0aCBkPSJNMjAgMTBMMjYgMjBIMTRMMjAgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjAgMzBMMTQgMjBIMjZMMjAgMzBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=" alt="Grafana Logo" width="40" height="40" /> </div> </div> <div class="card disabled"> <div class="card-secondary-actions"> <button class="icon-btn disabled" title="Show all dashboards for this data source">⊞</button> <button class="icon-btn disabled" title="Delete this data source">🗑</button> </div> <div class="card-heading">1-ops-tools1-fallback</div> <div class="card-meta"> Grafana | <a href="https://ops-us-east4.grafana.net/api/prom">https://ops-us-east4.grafana.net/api/prom</a> </div> <div class="card-figure"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzE5NzFGRiIvPgo8cGF0aCBkPSJNMjAgMTBMMjYgMjBIMTRMMjAgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjAgMzBMMTQgMjBIMjZMMjAgMzBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=" alt="Grafana Logo" width="40" height="40" /> </div> <div class="card-actions"> <button class="btn disabled">Settings</button> <button class="btn disabled">Explore</button> </div> </div> <h3>Selectable</h3> <div class="card selected disabled"> <div class="card-heading">Option #1</div> <div class="card-meta">This is a really great option, you won't regret it.</div> <div class="card-figure"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzE5NzFGRiIvPgo8cGF0aCBkPSJNMjAgMTBMMjYgMjBIMTRMMjAgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjAgMzBMMTQgMjBIMjZMMjAgMzBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=" alt="Grafana Logo" width="40" height="40" /> </div> </div></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">