Buma UI - DocumentationBuma UI - Documentation
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
Back to BSpace
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
  • stacksFoundations
    • 💡 Overview
    • Color
    • Principle
    • Typography
  • brickComponents
    • 💡 Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Bottom Sheet
    • Bread Crumb
    • Button
    • Button Link
    • Button Navigation
    • Calendar
    • Card
    • Chat
    • Checkbox
    • Chips
    • Choice Tile
    • Comment
    • Date Picker
    • Divider
    • Download
    • Drawer
    • Dropdown
    • Empty State
    • Floating Button
    • Form Input
    • Header
    • Hint
    • Icon
    • List Choice
    • Loading
    • Modal
    • Navigation Bar
    • Notification
    • Pagination
    • Progress Bar
    • Radio Button
    • Search
    • Scrolling Bar
    • Segmented Switch
    • Side Menu
    • Side Tab
    • Slider
    • Switch
    • Tab
    • Table
    • Text Area
    • Text Input
    • Time Picker
    • Title
    • Toast
    • Tooltip
    • Wizzard
  • splitscreenPattern
    • 💡 Overview
    • Filter
      upcoming
    • Form
      upcoming
    • Notification
    • PWA
      upcoming
    • table
      upcoming
    • Upload Download
      upcoming
  • insert_chartData Visualization
    • 💡 Overview
    • Tiering
    • Pattern
    • Chart and Graph
      • Chart Selection Guide
      • Map Selector
      • Donut Chart
      • Donut Progress Bar Chart
      • Spider Chart
      • Line Chart
      • Chart Area
      • Speedometer
      • Heat Map
      • Scatter Plot
      • Pie Chart
      • Bar Chart
      • Waterfall Chart
      • Sunburst Chart
      • Tree Decomposition Chart
      • Scorecards
      • Table
      • Micro Visualization
    • Typography
    • Color Palette
  • data_objectTokens
    upcoming
  • inventory_2Resources
    • 💡 Overview
    • Mobile
      new
      • 💡 Introduction
      • Installation
      • General
        • Important Rules
        • Naming Convention
        • Clean Architecture
    • Web
      upcoming

Scorecards

Guidelines for Scorecards

    • Key Metrics: Emphasize key metrics such as totals, averages, or important KPIs clearly.
    • Supporting Data: Include data support that provides context, such as percentages, comparisons to targets, or trends.
    • Icons and Colors: Use icons and colors to draw attention to important metrics and indicate status (for example, green for on target, red for below target).
    • Typography: Use large, bold fonts for key metrics, and smaller fonts for supporting information.
When to Use Scorecards?
  • Displays key performance indicators (KPIs) at a glance.​
  • Summarizes important metrics in a concise format.
  • Highlights important numeric data points for quick reference.
arrow_back
Previous Tree Decomposition Chart
Next Table
arrow_forward