{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CardStat Component Documentation","siteUrl":"https://xrpl.org","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"]}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"cardstat-component-documentation","__idx":0},"children":["CardStat Component Documentation"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The CardStat component is a statistics card that displays prominent numerical data with a descriptive label and optional call-to-action buttons. Following the XRPL Brand Design System (BDS), it supports four color variants and responsive layouts to showcase key metrics and statistics effectively."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":2},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Four Color Variants"]},": Lilac (default), Green, Light Gray, and Dark Gray"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Flexible Content"]},": Large statistic text with descriptive label"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional CTAs"]},": Support for 0, 1, or 2 buttons (Primary and/or Secondary)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Design"]},": Adaptive sizing and typography across breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Theme Support"]},": Automatic light/dark mode adaptation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessible"]},": Semantic HTML with proper button accessibility"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props-api","__idx":3},"children":["Props API"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"interface ButtonConfig {\n  /** Button label text */\n  label: string;\n  /** Click handler for button */\n  onClick?: () => void;\n  /** Link href for button */\n  href?: string;\n}\n\ninterface CardStatProps {\n  /** The main statistic to display (e.g., \"6 Million+\") */\n  statistic: string;\n  /** Descriptive label for the statistic */\n  label: string;\n  /** Background color variant */\n  variant?: 'lilac' | 'green' | 'light-gray' | 'dark-gray';\n  /** Primary button configuration */\n  primaryButton?: ButtonConfig;\n  /** Secondary button configuration */\n  secondaryButton?: ButtonConfig;\n  /** Additional CSS classes */\n  className?: string;\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-values","__idx":4},"children":["Default Values"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'lilac'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["primaryButton"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}," (no button)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["secondaryButton"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}," (no button)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["''"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants","__idx":5},"children":["Color Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"lilac-default","__idx":6},"children":["Lilac (Default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A purple/lavender background that provides a soft, friendly appearance."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Best For:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["User-focused statistics (active wallets, users)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Community metrics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Engagement statistics"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Usage:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStat \n  statistic=\"6 Million+\" \n  label=\"Active wallets\"\n  variant=\"lilac\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"green","__idx":7},"children":["Green"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["XRPL brand green background that reinforces brand identity."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Best For:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Financial metrics (transaction volume, value moved)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Growth statistics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Positive indicators"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Usage:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStat \n  statistic=\"$1 Trillion+\" \n  label=\"Value moved\"\n  variant=\"green\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"light-gray","__idx":8},"children":["Light Gray"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Light gray background for technology and reliability metrics."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Best For:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Technical statistics (uptime, performance)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Infrastructure metrics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Stability indicators"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Usage:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStat \n  statistic=\"12+\" \n  label=\"Continuous uptime years\"\n  variant=\"light-gray\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dark-gray","__idx":9},"children":["Dark Gray"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Neutral dark gray background for general-purpose statistics."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Best For:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Neutral metrics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Secondary information"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Supporting statistics"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Usage:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStat \n  statistic=\"70+\" \n  label=\"Ecosystem partners\"\n  variant=\"dark-gray\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"button-configurations","__idx":10},"children":["Button Configurations"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"no-buttons","__idx":11},"children":["No Buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display statistics without call-to-action buttons for informational purposes."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStat \n  statistic=\"6 Million+\" \n  label=\"Active wallets\"\n  variant=\"lilac\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"single-button-primary","__idx":12},"children":["Single Button (Primary)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Include one primary button for a main call-to-action."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStat \n  statistic=\"6 Million+\" \n  label=\"Active wallets\"\n  variant=\"lilac\"\n  primaryButton={{\n    label: \"Learn More\",\n    href: \"/wallets\"\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"two-buttons-primary--secondary","__idx":13},"children":["Two Buttons (Primary + Secondary)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Include both primary and secondary buttons for multiple actions."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStat \n  statistic=\"6 Million+\" \n  label=\"Active wallets\"\n  variant=\"lilac\"\n  primaryButton={{\n    label: \"Learn More\",\n    href: \"/wallets\"\n  }}\n  secondaryButton={{\n    label: \"Get Started\",\n    onClick: handleGetStarted\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works","__idx":14},"children":["How It Works"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"component-structure","__idx":15},"children":["Component Structure"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The CardStat component uses BEM (Block Element Modifier) naming convention with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds"]}," namespace:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat"]}," - Base card class"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat--lilac"]}," - Lilac variant modifier"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat--green"]}," - Green variant modifier"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat--light-gray"]}," - Light gray variant modifier"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat--dark-gray"]}," - Dark gray variant modifier"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__content"]}," - Inner content wrapper"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__text"]}," - Text section container"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__statistic"]}," - Large statistic text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__label"]}," - Descriptive label text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__buttons"]}," - Button container"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__button-link"]}," - Link wrapper for buttons"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"layout","__idx":16},"children":["Layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card uses flexbox for vertical layout:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content wrapper"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__content"]},"): Main container with padding"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Text section"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__text"]},"): Contains statistic and label"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Buttons section"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stat__buttons"]},"): Optional CTA buttons"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The layout automatically adjusts spacing between sections using flexbox ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["justify-content: space-between"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"responsive-behavior","__idx":17},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component adapts to different screen sizes:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Base (Mobile, <576px):"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Padding: 8px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Min height: 200px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Statistic: 64px font size"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Label: 16px font size"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["MD (Tablet, ≥576px):"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Padding: 12px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Min height: 208px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Same typography as mobile"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["LG+ (Desktop, ≥992px):"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Padding: 16px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Min height: 298px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Statistic: 72px font size"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Label: 18px font size"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"button-integration","__idx":18},"children":["Button Integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Buttons use the existing BDS Button component with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color=\"black\""]}," variant to ensure proper contrast on colored backgrounds. Buttons can be either:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Links"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," provided): Wrapped in an anchor tag for navigation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Actions"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," provided): Rendered as interactive buttons"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typography","__idx":19},"children":["Typography"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"statistic-text","__idx":20},"children":["Statistic Text"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font"]},": Booton, sans-serif"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Weight"]},": 228 (Light)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Size"]},": 64px (mobile), 72px (desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Line Height"]},": 70.4px (mobile), 79.2px (desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Letter Spacing"]},": -4.5px (mobile), -5px (desktop)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"label-text","__idx":21},"children":["Label Text"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font"]},": Booton, sans-serif"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Weight"]},": 400 (Regular)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Size"]},": 16px (mobile), 18px (desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Line Height"]},": 23.2px (mobile), 26.1px (desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Letter Spacing"]},": 0px (mobile), -0.5px (desktop)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"spacing--layout","__idx":22},"children":["Spacing & Layout"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Border Radius"]},": 8px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button Gap"]},": 8px between buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Text Gap"]},": 4px between statistic and label"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Min Heights"]},": 200px (mobile), 208px (tablet), 298px (desktop)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-examples","__idx":23},"children":["Usage Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage","__idx":24},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CardStat } from 'shared/components/CardStat';\n\n// Simple statistic card\n<CardStat \n  statistic=\"6 Million+\" \n  label=\"Active wallets\"\n/>\n\n// With color variant\n<CardStat \n  statistic=\"$1 Trillion+\" \n  label=\"Value moved\"\n  variant=\"green\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-buttons","__idx":25},"children":["With Buttons"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// Single button (Light Gray variant)\n<CardStat \n  statistic=\"12+\" \n  label=\"Continuous uptime years\"\n  variant=\"light-gray\"\n  primaryButton={{\n    label: \"Learn More\",\n    href: \"/about/uptime\"\n  }}\n/>\n\n// Two buttons (Dark Gray variant)\n<CardStat \n  statistic=\"70+\" \n  label=\"Ecosystem partners\"\n  variant=\"dark-gray\"\n  primaryButton={{\n    label: \"View Partners\",\n    href: \"/partners\"\n  }}\n  secondaryButton={{\n    label: \"Become Partner\",\n    onClick: handlePartnerSignup\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"in-pagegrid-layout","__idx":26},"children":["In PageGrid Layout"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CardStat } from 'shared/components/CardStat';\nimport { PageGrid, PageGridRow, PageGridCol } from 'shared/components/PageGrid/page-grid';\n\n<PageGrid>\n  <PageGridRow>\n    <PageGridCol span={{ base: 4, md: 4, lg: 4 }}>\n      <CardStat \n        statistic=\"6 Million+\" \n        label=\"Active wallets\"\n        variant=\"lilac\"\n      />\n    </PageGridCol>\n    <PageGridCol span={{ base: 4, md: 4, lg: 4 }}>\n      <CardStat \n        statistic=\"$1 Trillion+\" \n        label=\"Value moved\"\n        variant=\"green\"\n      />\n    </PageGridCol>\n    <PageGridCol span={{ base: 4, md: 4, lg: 4 }}>\n      <CardStat \n        statistic=\"12+\" \n        label=\"Continuous uptime years\"\n        variant=\"light-gray\"\n      />\n    </PageGridCol>\n  </PageGridRow>\n</PageGrid>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-click-handlers","__idx":27},"children":["With Click Handlers"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"const handleLearnMore = () => {\n  console.log('Learn more clicked');\n};\n\n<CardStat \n  statistic=\"6 Million+\" \n  label=\"Active wallets\"\n  variant=\"lilac\"\n  primaryButton={{\n    label: \"Learn More\",\n    onClick: handleLearnMore\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":28},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"semantic-html","__idx":29},"children":["Semantic HTML"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<div>"]}," elements with proper structure"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button components handle their own accessibility"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Text content is readable by screen readers"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"keyboard-navigation","__idx":30},"children":["Keyboard Navigation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Buttons are fully keyboard accessible (Tab, Enter, Space)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Links are keyboard navigable (Tab, Enter)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Focus indicators provided by Button component"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color-contrast","__idx":31},"children":["Color Contrast"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All variants meet WCAG AA standards:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Black text on colored backgrounds"]},": Sufficient contrast"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Buttons"]},": Use black variant with proper contrast on all backgrounds"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark mode dark gray"]},": Switches to white text for proper contrast"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":32},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Keep statistics concise"]}," - Use abbreviations (M for million, K for thousand)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use descriptive labels"]}," - Make it clear what the statistic represents"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Choose appropriate variants"]}," - Match color to the type of metric"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Limit button usage"]}," - Use buttons only when actionable context is needed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Consider grid layouts"]}," - Use PageGrid for consistent spacing and alignment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Test responsiveness"]}," - Verify cards adapt properly at all breakpoints"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"when-to-use","__idx":33},"children":["When to Use"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use CardStat to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Highlight key metrics"]}," - Show important numbers prominently"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dashboard sections"]}," - Create stat-focused areas on landing pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["About pages"]}," - Showcase company or product statistics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Feature sections"]}," - Emphasize quantitative benefits"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Report summaries"]}," - Display high-level data points"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"when-not-to-use","__idx":34},"children":["When NOT to Use"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Avoid CardStat when:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Complex data"]}," - Use charts or tables for detailed information"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Multiple related metrics"]}," - Consider data visualization components"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Non-numeric content"]}," - Use regular cards for text-heavy content"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Real-time updates"]}," - Consider dedicated dashboard components"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-tokens","__idx":35},"children":["Design Tokens"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component uses design tokens from the XRPL Brand Design System:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"colors","__idx":36},"children":["Colors"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$bds-card-stat-lilac-bg"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#D9CAFF"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$bds-card-stat-green-bg"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-300"]}," (#EAFCF1)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$bds-card-stat-light-gray-bg"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#CAD4DF"]}," (light gray)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$bds-card-stat-dark-gray-bg"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#8A919A"]}," (dark gray)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Text: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#141414"]}," (neutral black)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"spacing","__idx":37},"children":["Spacing"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Border radius: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["8px"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Button gap: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["8px"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Text gap: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4px"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Content padding: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["8px"]}," (mobile), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["12px"]}," (tablet), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16px"]}," (desktop)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"motion","__idx":38},"children":["Motion"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Transition duration: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["150ms"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Timing function: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cubic-bezier(0.98, 0.12, 0.12, 0.98)"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"theme-support","__idx":39},"children":["Theme Support"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically adapts for light and dark modes:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"light-mode-default","__idx":40},"children":["Light Mode (Default)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All color variants use their defined light backgrounds"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Black text on colored backgrounds"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dark-mode","__idx":41},"children":["Dark Mode"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark Gray variant"]},": Switches to darker gray background (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]},") with white text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Other variants"]},": Maintain colored backgrounds with black text"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"showcase","__idx":42},"children":["Showcase"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See the interactive showcase at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/cardstat-showcase"]}," for live examples of all variants, button configurations, and responsive behavior in PageGrid layouts."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"file-structure","__idx":43},"children":["File Structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"shared/components/CardStat/\n├── CardStat.tsx        # Component implementation\n├── CardStat.scss       # Component styles\n├── CardStat.md         # This documentation\n└── index.ts            # Exports\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":44},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button"]}," - Used for CTA buttons within cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PageGrid"]}," - For laying out multiple cards in responsive grids"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Divider"]}," - Can be used to separate card sections if needed"]}]}]},"headings":[{"value":"CardStat Component Documentation","id":"cardstat-component-documentation","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Features","id":"features","depth":2},{"value":"Props API","id":"props-api","depth":2},{"value":"Default Values","id":"default-values","depth":3},{"value":"Color Variants","id":"color-variants","depth":2},{"value":"Lilac (Default)","id":"lilac-default","depth":3},{"value":"Green","id":"green","depth":3},{"value":"Light Gray","id":"light-gray","depth":3},{"value":"Dark Gray","id":"dark-gray","depth":3},{"value":"Button Configurations","id":"button-configurations","depth":2},{"value":"No Buttons","id":"no-buttons","depth":3},{"value":"Single Button (Primary)","id":"single-button-primary","depth":3},{"value":"Two Buttons (Primary + Secondary)","id":"two-buttons-primary--secondary","depth":3},{"value":"How It Works","id":"how-it-works","depth":2},{"value":"Component Structure","id":"component-structure","depth":3},{"value":"Layout","id":"layout","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":3},{"value":"Button Integration","id":"button-integration","depth":3},{"value":"Typography","id":"typography","depth":2},{"value":"Statistic Text","id":"statistic-text","depth":3},{"value":"Label Text","id":"label-text","depth":3},{"value":"Spacing & Layout","id":"spacing--layout","depth":2},{"value":"Usage Examples","id":"usage-examples","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":3},{"value":"With Buttons","id":"with-buttons","depth":3},{"value":"In PageGrid Layout","id":"in-pagegrid-layout","depth":3},{"value":"With Click Handlers","id":"with-click-handlers","depth":3},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Semantic HTML","id":"semantic-html","depth":3},{"value":"Keyboard Navigation","id":"keyboard-navigation","depth":3},{"value":"Color Contrast","id":"color-contrast","depth":3},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"When to Use","id":"when-to-use","depth":2},{"value":"When NOT to Use","id":"when-not-to-use","depth":2},{"value":"Design Tokens","id":"design-tokens","depth":2},{"value":"Colors","id":"colors","depth":3},{"value":"Spacing","id":"spacing","depth":3},{"value":"Motion","id":"motion","depth":3},{"value":"Theme Support","id":"theme-support","depth":2},{"value":"Light Mode (Default)","id":"light-mode-default","depth":3},{"value":"Dark Mode","id":"dark-mode","depth":3},{"value":"Showcase","id":"showcase","depth":2},{"value":"File Structure","id":"file-structure","depth":2},{"value":"Related Components","id":"related-components","depth":2}],"frontmatter":{"seo":{"title":"CardStat Component Documentation"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/CardStat/CardStat.md"},"lastModified":"2025-12-08T21:58:57.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/components/cardstat/cardstat-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}