Performance Metrics Card is a premium analytics component designed to showcase your most important KPIs, insights, and performance indicators in an interactive carousel format. Perfect for dashboards, SaaS platforms, analytics pages, and revenue reports, this component transforms raw data into clear, visual storytelling.
This component is fully responsive, adapting seamlessly to desktops, tablets, and mobile devices. Every slide automatically scales, rearranges, and reflows for clean readability on any screen size—making it ideal for modern, multi-device audiences.
Every part of this component can be customized using simple handles directly in Framer:
Background Layers Three editable background fields let you create depth, gradients, and dark-theme effects instantly.
Border Light Toggle Adds or removes a subtle glow to enhance card separation.
Slides Manager Add, duplicate, reorder, or delete slides from the “Slides” panel .Each slide includes editable fields for:• Insight Heading• Slide Color• Percentage / Value• Heading Text• Highlighted Text• Subheading• Description
Carousel Controls Toggle navigation arrows and pagination dots based on your preference.
Total Slides Control Adjust the number of visible slides with a simple slider.
Typography Handles Individually control fonts for the tagline, metric, heading, and description—making it easy to match any brand identity.
Turns complex data into clean visual storytelling
Enhances SaaS dashboards and analytics pages
Ideal for marketing insights, growth KPIs, performance reports, user analytics, and revenue projections
Easy for designers and non-designers thanks to handle-based editing
Looks stunning on all devices due to full responsive behavior
Drop the component into your page or section.
Open the Slides panel to edit each card’s content.
Adjust the backgrounds and fonts to match your branding.
Toggle the carousel on or off depending on your layout style.
Add more slides or reduce them using the Total Slides control.
Publish — the component automatically adapts responsively across all devices.
Akshay M
