{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CardIcon Component","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":"cardicon-component","__idx":0},"children":["CardIcon Component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A clickable card component featuring an icon (top-left) and label text with arrow (bottom). Supports two color variants with responsive sizing that adapts at breakpoints."]},{"$$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":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Two Color Variants"]},": Neutral (gray) and Green"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Five Interaction States"]},": Default, Hover, Focused, Pressed, Disabled"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Sizing"]},": Automatically adapts at SM/MD/LG breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Window Shade Animation"]},": Smooth hover effect with color wipe"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessible"]},": Full keyboard navigation and ARIA support"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Flexible Rendering"]},": Renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]}," based on props"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-sizes","__idx":2},"children":["Responsive Sizes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component automatically adapts its dimensions based on viewport width:"]},{"$$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":"Height"},"children":["Height"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Icon Size"},"children":["Icon Size"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Padding"},"children":["Padding"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["SM (< 576px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["136px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["56x56"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["8px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["MD (576px - 991px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["140px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["60x60"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["12px"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["LG (>= 992px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["144px"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["64x64"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["16px"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-states","__idx":3},"children":["Color States"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"light-mode","__idx":4},"children":["Light Mode"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"neutral-variant","__idx":5},"children":["Neutral Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]},": Gray 200 (#E6EAF0) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover"]},": Gray 300 (#CAD4DF) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focused"]},": Gray 300 + 2px black border - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pressed"]},": Gray 400 (#8A919A) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled"]},": Gray 100 (#F0F3F7) - muted text (Gray 400), 50% icon opacity"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"green-variant","__idx":6},"children":["Green Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]},": Green 200 (#70EE97) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover"]},": Green 300 (#21E46B) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focused"]},": Green 300 + 2px black border - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pressed"]},": Green 400 (#0DAA3E) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled"]},": Green 100 (#EAFCF1) - muted text (Gray 400), 50% icon opacity"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dark-mode","__idx":7},"children":["Dark Mode"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"neutral-variant-1","__idx":8},"children":["Neutral Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]},": Gray 500 (#72777E) - white text; icons forced white (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["filter"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover"]},": Gray 400 (#8A919A) - white text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focused"]},": Gray 400 overlay + ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["2px white"]}," focus outline - white text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pressed"]},": ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500-pressed-dark"]}," (#56595E)"]}," — neutral/500 (#72777E) with 70% black tint"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled"]},": Gray 500 at 30% opacity - white text; icons stay white (same filter)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"green-variant-1","__idx":9},"children":["Green Variant"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default"]},": Green 300 (#21E46B) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hover"]},": Green 200 (#70EE97) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Focused"]},": Green 200 overlay + ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["2px white"]}," focus outline - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pressed"]},": Green 400 (#0DAA3E) - black text"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled"]},": Gray 500 at 30% opacity - white text; ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["icon forced white"]}," for contrast"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":10},"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":"Default"},"children":["Default"]},{"$$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":["variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral' | 'green'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon image source (URL or path)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconAlt"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["''"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Alt text for the icon image"]}]},{"$$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":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card label text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link destination (renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Click handler (renders as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Disabled state"]}]},{"$$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":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["''"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-examples","__idx":11},"children":["Usage Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-link-card","__idx":12},"children":["Basic Link Card"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { CardIcon } from '@/shared/components/CardIcon';\n\n<CardIcon\n  variant=\"neutral\"\n  icon=\"/icons/javascript.svg\"\n  iconAlt=\"JavaScript logo\"\n  label=\"Get Started with Javascript\"\n  href=\"/docs/tutorials/javascript\"\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"green-variant-with-click-handler","__idx":13},"children":["Green Variant with Click Handler"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardIcon\n  variant=\"green\"\n  icon=\"/icons/python.svg\"\n  iconAlt=\"Python logo\"\n  label=\"Python Tutorial\"\n  onClick={() => openTutorial('python')}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-state","__idx":14},"children":["Disabled State"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<CardIcon\n  variant=\"neutral\"\n  icon=\"/icons/coming-soon.svg\"\n  label=\"Coming Soon\"\n  disabled\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"within-a-grid-layout","__idx":15},"children":["Within a Grid Layout"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { PageGrid, PageGridItem } from '@/shared/components/PageGrid';\nimport { CardIcon } from '@/shared/components/CardIcon';\n\n<PageGrid>\n  <PageGridItem colSpan={{ sm: 2, md: 4, lg: 3 }}>\n    <CardIcon\n      variant=\"neutral\"\n      icon=\"/icons/javascript.svg\"\n      label=\"JavaScript\"\n      href=\"/docs/javascript\"\n    />\n  </PageGridItem>\n  <PageGridItem colSpan={{ sm: 2, md: 4, lg: 3 }}>\n    <CardIcon\n      variant=\"green\"\n      icon=\"/icons/python.svg\"\n      label=\"Python\"\n      href=\"/docs/python\"\n    />\n  </PageGridItem>\n</PageGrid>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":16},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Uses semantic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<a>"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<button>"]}," elements based on interaction type"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Includes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-label"]}," for screen readers"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Supports keyboard navigation (Tab, Enter, Space)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Focus states meet WCAG 2.1 AA contrast requirements"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Disabled state includes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-disabled"]}," attribute"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes-bem","__idx":17},"children":["CSS Classes (BEM)"]},{"$$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-icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Base card styles"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon--neutral"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Neutral color variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon--green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green color variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon--hovered"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hover state (JS-controlled)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon--disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Disabled state"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon__overlay"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hover animation overlay"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon__icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon__icon-img"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon image"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon__content"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Bottom content row"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon__label"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Text label"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-card-icon__arrow"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Arrow icon wrapper"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-tokens","__idx":18},"children":["Design Tokens"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component uses these design tokens from the style system:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Colors"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-400"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-100"]}," through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$green-400"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Typography"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-r"]}," token from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_font.scss"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Breakpoints"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$grid-breakpoints"]}," from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_breakpoints.scss"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Animation"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cubic-bezier(0.98, 0.12, 0.12, 0.98)"]}," timing function"]}]}]},"headings":[{"value":"CardIcon Component","id":"cardicon-component","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Responsive Sizes","id":"responsive-sizes","depth":2},{"value":"Color States","id":"color-states","depth":2},{"value":"Light Mode","id":"light-mode","depth":3},{"value":"Neutral Variant","id":"neutral-variant","depth":4},{"value":"Green Variant","id":"green-variant","depth":4},{"value":"Dark Mode","id":"dark-mode","depth":3},{"value":"Neutral Variant","id":"neutral-variant-1","depth":4},{"value":"Green Variant","id":"green-variant-1","depth":4},{"value":"Props","id":"props","depth":2},{"value":"Usage Examples","id":"usage-examples","depth":2},{"value":"Basic Link Card","id":"basic-link-card","depth":3},{"value":"Green Variant with Click Handler","id":"green-variant-with-click-handler","depth":3},{"value":"Disabled State","id":"disabled-state","depth":3},{"value":"Within a Grid Layout","id":"within-a-grid-layout","depth":3},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"CSS Classes (BEM)","id":"css-classes-bem","depth":2},{"value":"Design Tokens","id":"design-tokens","depth":2}],"frontmatter":{"seo":{"title":"CardIcon Component"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/CardIcon/CardIcon.md"},"lastModified":"2026-03-25T23:33:48.000Z","isTranslationFallback":true,"pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/components/cardicon/cardicon-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}