{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CardOffgrid Component - Usage Guide","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":"cardoffgrid-component---usage-guide","__idx":0},"children":["CardOffgrid Component - Usage Guide"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardOffgrid"]}," is a feature highlight card component designed to showcase key capabilities, features, or resources. It combines an icon, title, and description in a visually engaging, interactive card format with smooth hover animations."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use CardOffgrid when:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Highlighting key features or capabilities"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating feature grids or showcases"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Linking to important documentation or resources"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Presenting product/service highlights"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't use CardOffgrid for:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Simple content cards (use standard Bootstrap cards)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigation items (use navigation components)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Data display (use tables or data components)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Long-form content (use article/page layouts)"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"when-to-use-each-variant","__idx":2},"children":["When to Use Each Variant"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"neutral-variant--variantneutral-","__idx":3},"children":["Neutral Variant (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant=\"neutral\""]},")"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use for:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["General feature highlights"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Standard content cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Secondary or supporting features"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["When you want subtle, professional presentation"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example use cases:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Documentation sections"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Feature lists"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Service offerings"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Standard informational cards"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"green-variant--variantgreen-","__idx":4},"children":["Green Variant (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant=\"green\""]},")"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use for:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Primary or featured highlights"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Call-to-action cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Important announcements"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Brand-emphasized content"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example use cases:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Hero feature cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Primary CTAs"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Featured resources"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Branded highlights"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"content-best-practices","__idx":5},"children":["Content Best Practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"title-guidelines","__idx":6},"children":["Title Guidelines"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["✅ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Do:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keep titles concise (1-3 words ideal)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use line breaks (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\\n"]},") for multi-word titles when needed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Make titles action-oriented or descriptive"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Examples: \"Onchain Metadata\", \"Token\\nManagement\", \"Cross-Chain\\nBridges\""]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["❌ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Write long sentences as titles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use more than 2 lines"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Include punctuation (periods, commas)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Make titles too generic (\"Feature\", \"Service\")"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"description-guidelines","__idx":7},"children":["Description Guidelines"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["✅ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Do:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Write 1-2 sentences (15-25 words ideal)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Focus on benefits or key information"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use clear, simple language"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Keep descriptions scannable"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["❌ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Write paragraphs (save for full pages)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use jargon without context"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Include multiple ideas in one description"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Make descriptions too short (< 10 words) or too long (> 40 words)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"icon-guidelines","__idx":8},"children":["Icon Guidelines"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["✅ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Do:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use SVG icons for crisp rendering"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose icons that represent the feature clearly"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ensure icons are recognizable at 68×68px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use consistent icon style across cards"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["❌ ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Don't:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use low-resolution raster images"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Choose overly complex icons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mix icon styles within a single grid"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use icons that don't relate to the content"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"interaction-patterns","__idx":9},"children":["Interaction Patterns"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-onclick-vs-href","__idx":10},"children":["Using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," vs ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," when:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Triggering JavaScript actions (modals, analytics, state changes)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Opening external links in new tabs"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Performing client-side navigation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Handling complex interactions"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"}\n title=\"View Analytics\"\n description=\"See detailed usage statistics and insights.\"\n onClick={() => {\n trackEvent('analytics_viewed');\n openModal('analytics');\n }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," when:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigating to internal pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Linking to documentation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Simple page navigation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["SEO-friendly links"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"static-presentational-cards","__idx":11},"children":["Static (Presentational) Cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Omit both ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}," to render a purely presentational card. It has no"," ","click target, so the component drops every interactive affordance: no pointer"," ","cursor, no hover color wipe, and no pressed state. It renders as a plain ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["
"]}," ","and isn't focusable or announced as a control."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this for cards that only communicate information — e.g. a \"why XRPL\" feature"," ","carousel where none of the cards link anywhere."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"disabled-state","__idx":12},"children":["Disabled State"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}," when:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Feature is coming soon"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Feature requires authentication"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Feature is temporarily unavailable"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You want to show but not allow interaction"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"}\n title=\"Coming\\nSoon\"\n description=\"This feature will be available in the next release.\"\n disabled\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"layout-best-practices","__idx":13},"children":["Layout Best Practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"grid-layouts","__idx":14},"children":["Grid Layouts"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Recommended grid patterns:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"// 2-column grid (desktop)\n
\n
\n \n
\n
\n \n
\n
\n\n// 3-column grid (desktop)\n
\n {cards.map(card => (\n
\n \n
\n ))}\n
\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Spacing:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use Bootstrap spacing utilities (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mb-4"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mb-5"]},") between cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Maintain consistent spacing in grids"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cards are responsive and stack on mobile automatically"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"single-card-usage","__idx":15},"children":["Single Card Usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For hero sections or featured highlights:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"