WELCOME
Telescope Design System > Foundations > Cards
Cards
Cards display graphic charts powered by dynamic data and AI insights and offer data/graphic-related features.
Anatomy
Card Title
Option
Option
Option
Feature
Content
8 px
32 px
32 px
24 px
24 px
8 px
12 px
12 px
12 px
24 px
12 px
24 px
Formula
Card Height: 480 px
Card Width: Responsive
Card Padding: 12 px
Card Spacing: 12 px
Header Spacing: 8 px
Content Padding: 24 px
Card Variants
Cards are responsive and adapt to screen sizes with flex widths. There can be a maximum of 3 and a minimum of 1 card on the horizontal plane of the screen (trend cards can be up to 4). Cards are called small, medium and large cards. Small cards can be thought of as mobile device versions.
Card/S/Trend
12,812
22%
Card/S/Trend
24,124
%12
Card/S/Trend
4,904
0%
Card/S/Trend
2,012
12%
Month
Quarter
Year
Card/S/Bar/Vert
Notes
Month
Quarter
Year
Card/S/Bar/Hor
Notes
Month
Quarter
Year
Card/S/Line/Outline
Notes
Month
Quarter
Year
Card/S/Bar/Ver/St
Notes
Month
Quarter
Year
Card/S/Bar/Hor/St
Notes
Month
Quarter
Year
Card/S/Line/Fill
Notes
Month
Quarter
Year
Card/S/Pie
Notes
Month
Quarter
Year
Card/S/Doughnut
Notes
Month
Quarter
Year
Card/S/Polar
Notes
Card/M/Trend
12,812
22%
Card/M/Trend
24,124
%12
Card/M/Trend
4,904
0%
Month
Quarter
Year
Card/M/Radar
Notes
Month
Quarter
Year
Card/M/Polar
Notes
Month
Quarter
Year
Card/M/Line/Outline
Notes
Month
Quarter
Year
Card/M/Line/Fill
Notes
Month
Quarter
Year
Card/M/Bar/Ver/St
Notes
Month
Quarter
Year
Card/M/Bar/Hor/St
Notes
Month
Quarter
Year
Card/M/Bar/Vert
Notes
Month
Quarter
Year
Card/M/Bar/Hor
Notes
Card/L/Trend
12,812
22%
Card/L/Trend
24,124
%12
Month
Quarter
Year
Card/L/Bar/Vert
Notes
Month
Quarter
Year
Card/L/Bar/Hor
Notes
Month
Quarter
Year
Card/L/Bar/Ver/St
Notes
Month
Quarter
Year
Card/L/Bar/Hor/St
Notes
Month
Quarter
Year
Card/L/Line/Outline
Notes
Month
Quarter
Year
Card/L/Line/Fill
Notes
Month
Quarter
Year
Card/L/Bubble
Notes
Month
Quarter
Year
Card/L/Scatter
Notes