{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CardStats Pattern","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":"cardstats-pattern","__idx":0},"children":["CardStats Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A section pattern that displays a heading, optional description, and a responsive grid of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardStat"]}," components. Designed for showcasing key statistics and metrics on landing pages."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"features","__idx":1},"children":["Features"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive grid layout (2 columns mobile/tablet, 3 columns desktop)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Heading with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading-md"]}," typography (Tobias Light)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optional description with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-l"]}," typography (Booton Light)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Proper spacing using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PageGrid"]}," for container and alignment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full dark mode support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Reuses the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardStat"]}," component for consistent styling"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":2},"children":["Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CardStats } from 'shared/sections/CardStatsList';\n\n<CardStats\n  heading=\"Blockchain Trusted at Scale\"\n  description=\"Streamline development and build powerful RWA tokenization solutions with XRP Ledger's comprehensive developer toolset.\"\n  cards={[\n    {\n      statistic: \"12\",\n      superscript: \"+\",\n      label: \"Continuous uptime years\",\n      variant: \"lilac\",\n      primaryButton: { label: \"Learn More\", href: \"/docs\" }\n    },\n    {\n      statistic: \"6M\",\n      superscript: \"2\",\n      label: \"Active wallets\",\n      variant: \"light-gray\",\n      primaryButton: { label: \"Explore\", href: \"/wallets\" }\n    },\n    {\n      statistic: \"$1T\",\n      superscript: \"+\",\n      label: \"Value transferred\",\n      variant: \"green\",\n      primaryButton: { label: \"View Stats\", href: \"/stats\" }\n    },\n    // ... more cards\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":3},"children":["Props"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["heading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section heading text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["description"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional section description text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cards"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardStatProps[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of CardStat configurations"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cardstat-configuration","__idx":4},"children":["CardStat Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each card in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cards"]}," array accepts the following props:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["statistic"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The main statistic to display (e.g., \"6M\", \"$1T\")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["superscript"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'+' | '*' | '1'-'9' | '0'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Superscript text for the statistic"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Descriptive label for the statistic"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'lilac' | 'green' | 'light-gray' | 'dark-gray'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color variant (default: 'lilac')"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["primaryButton"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label: string, href?: string, onClick?: () => void }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Primary CTA button"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["secondaryButton"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label: string, href?: string, onClick?: () => void }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Secondary CTA button"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-variants","__idx":5},"children":["Color Variants"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Variant"},"children":["Variant"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Color"},"children":["Color"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Hex"},"children":["Hex"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Use Case"},"children":["Use Case"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lilac"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Lilac 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["#C0A7FF"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["User metrics, community stats"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["#21E46B"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Financial metrics, growth indicators"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["light-gray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 200"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["#E6EAF0"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Technical stats, reliability metrics"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dark-gray"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Gray 300"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["#CAD4DF"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Neutral metrics, secondary info"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":6},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Uses breakpoints from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_breakpoints.scss"]},":"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Breakpoint"},"children":["Breakpoint"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Width"},"children":["Width"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Columns"},"children":["Columns"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Card Gap"},"children":["Card Gap"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["xs (Mobile)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["0 - 575px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["md (Tablet)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["576px - 991px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["lg (Desktop)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["992px+"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":7},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-description","__idx":8},"children":["With Description"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStats\n  heading=\"Blockchain Trusted at Scale\"\n  description=\"Streamline development and build powerful RWA tokenization solutions.\"\n  cards={statsCards}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"without-description-heading-only","__idx":9},"children":["Without Description (Heading Only)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStats\n  heading=\"XRPL Network Statistics\"\n  cards={statsCards}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mixed-card-variants","__idx":10},"children":["Mixed Card Variants"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardStats\n  heading=\"Why Build on XRPL?\"\n  cards={[\n    { statistic: \"12\", superscript: \"+\", label: \"Uptime years\", variant: \"lilac\" },\n    { statistic: \"6M\", label: \"Active wallets\", variant: \"green\" },\n    { statistic: \"3-5s\", label: \"Transaction finality\", variant: \"light-gray\" },\n  ]}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":11},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Class"},"children":["Class"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stats"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Base section container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stats__header"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Header wrapper for heading and description"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stats__heading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section heading (uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".h-md"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stats__description"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section description (uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".body-l"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stats__cards"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cards grid container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-stats__card-wrapper"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Individual card wrapper"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":12},"children":["Design References"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Figma Design"]},": ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://www.figma.com/design/drnQQXnK9Q67MTPPKQsY9l/Section-Cards---Stats?node-id=32051-2839&m=dev"},"children":["Section Cards - Stats"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase Page"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/card-stats-showcase"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pattern Location"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/sections/CardStatsList/"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component Used"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/components/CardStat/"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":13},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Uses semantic HTML with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<section>"]}," and proper heading hierarchy"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CardStat buttons include proper focus states"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Color contrast meets WCAG AA requirements"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive layout ensures readability on all devices"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"version-history","__idx":14},"children":["Version History"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initial implementation: January 2026"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Figma design alignment with 4 color variants"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive grid layout with PageGrid integration"]}]}]},"headings":[{"value":"CardStats Pattern","id":"cardstats-pattern","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Usage","id":"usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"CardStat Configuration","id":"cardstat-configuration","depth":3},{"value":"Color Variants","id":"color-variants","depth":2},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"With Description","id":"with-description","depth":3},{"value":"Without Description (Heading Only)","id":"without-description-heading-only","depth":3},{"value":"Mixed Card Variants","id":"mixed-card-variants","depth":3},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Design References","id":"design-references","depth":2},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Version History","id":"version-history","depth":2}],"frontmatter":{"seo":{"title":"CardStats Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/CardStatsList/CardStatsList.md"},"lastModified":"2026-02-23T23:00:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/sections/cardstatslist/cardstatslist-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}