Card generator
Dashboard tiles, KPI summaries and record detail panels all start from the same lightning-card shell. Adjust the accent stripe, corner radius and hover lift so every card in your app page matches your brand.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-card title="Monthly Revenue" icon-name="standard:opportunity" class="studio-card">
<div class="slds-p-horizontal_small studio-card__body">
A clean SLDS card for dashboards, KPIs and record summaries.
</div>
</lightning-card>
</template>Design tips for cards
- A colored top border communicates status (revenue, risk, health) without adding another icon.
- Keep card shadows light (sm/md) when several cards sit in a grid — large shadows compete with each other.
- Use the lift hover effect on cards that are clickable, and none on cards that are purely informational.