{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CardsTwoColumn 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":"cardstwocolumn-pattern","__idx":0},"children":["CardsTwoColumn Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A section pattern featuring a header with title and description, plus a 2×2 grid of TextCard components. Designed for showcasing multiple related content areas with visual variety through six color variants."]},{"$$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":["Header Section"]},": Title (heading-md) with optional description (body-l, muted)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["4-Card Grid"]},": 2×2 layout on desktop, single column stacked on tablet/mobile"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["6 Color Variants"]},": Green, neutral-light, neutral-dark, lilac, yellow, and blue"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TextCard behavior"]},": Hover (window shade on desktop), focus, pressed, visited, and tablet/mobile behavior are defined on ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TextCard"]}," — see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/ja/shared/components/textcard/textcard-2"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/components/TextCard/TextCard.md"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled State"]},": Cards can be disabled with appropriate styling for light/dark modes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Responsive Design"]},": Adapts layout and spacing across all breakpoints"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dark Mode Support"]},": Section chrome and cards follow ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]}]}]},{"$$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 { CardsTwoColumn } from 'shared/sections/CardsTwoColumn';\n\n<CardsTwoColumn\n  title=\"The Future of Finance is Already Onchain\"\n  description=\"XRP Ledger isn't about bold predictions. It's about delivering value now.\"\n  secondaryDescription=\"On XRPL, you're not waiting for the future. You're building it.\"\n  cards={[\n    { title: \"Institutions\", description: \"Banks, asset managers...\", color: \"lilac\" },\n    { title: \"Developers\", description: \"Build decentralized...\", color: \"neutral-light\" },\n    { title: \"Enterprise\", description: \"Scale your business...\", color: \"neutral-dark\" },\n    { title: \"Community\", description: \"Join the global...\", color: \"green\" }\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":"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":["title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section title (heading-md typography)"]}]},{"$$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":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Section description (body-l, muted color)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["secondaryDescription"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional description paragraph"]}]},{"$$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":["[TextCardProps, TextCardProps, TextCardProps, TextCardProps]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of exactly 4 card 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":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"textcardprops","__idx":4},"children":["TextCardProps"]},{"$$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":["title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card title (heading-lg typography)"]}]},{"$$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":["ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["-"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card description (body-l typography)"]}]},{"$$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":["Optional link URL (makes card clickable)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'green' | 'neutral-light' | 'neutral-dark' | 'lilac' | 'yellow' | 'blue'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral-light'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color variant"]}]},{"$$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":["Whether the card is disabled"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":5},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"desktop-992px","__idx":6},"children":["Desktop (≥992px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Header: Two-column layout (title left, description right)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cards: 2×2 grid with 8px gap"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Section padding: 40px vertical, 32px horizontal"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between header and cards: 40px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card height: 340px, padding: 24px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["TextCard: full window-shade hover animation (see TextCard docs)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tablet-576991px","__idx":7},"children":["Tablet (576–991px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Header: Stacked (title above description)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cards: Single column, stacked vertically with 8px gap"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Section padding: 32px vertical, 24px horizontal"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between header and cards: 32px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card height: 309px, padding: 20px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["TextCard: below ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]},", overlay uses instant “pressed” color (no wipe animation)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mobile-576px","__idx":8},"children":["Mobile (<576px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Header: Stacked (title above description)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cards: Single column, stacked vertically with 8px gap"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Section padding: 24px vertical, 16px horizontal"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Gap between header and cards: 24px"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card height: 274px, padding: 16px"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color--interaction-cards","__idx":9},"children":["Color & interaction (cards)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Detailed token tables, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["visited"]}," link behavior (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.dark"]},"), ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["focus"]}," (keyboard vs mouse), and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["tablet/mobile"]}," neutral differentiation are documented in:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/ja/shared/components/textcard/textcard-2"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/components/TextCard/TextCard.md"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":10},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":".bds-cards-two-column                    // Section container\n.bds-cards-two-column__container         // PageGrid container (vertical padding)\n.bds-cards-two-column__header            // Header row\n.bds-cards-two-column__header-left       // Title column\n.bds-cards-two-column__header-right      // Description column\n.bds-cards-two-column__title             // Section title\n.bds-cards-two-column__description       // Section description\n.bds-cards-two-column__cards             // Cards row (grid)\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"typography-tokens","__idx":11},"children":["Typography Tokens"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Section Title"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h-md"]}," (heading-md, Tobias Light)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Desktop: 40px / 46px line-height"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tablet: 36px / 45px line-height"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile: 32px / 40px line-height"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Section Description"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-l"]}," (Booton Light), color: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$gray-500"]}," (light section context)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All breakpoints: 18px / 26.1px line-height"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card Title"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h-lg"]}," (heading-lg, Tobias Light) — see TextCard"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card Description"]},": Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["body-l"]}," (Booton Light) — see TextCard"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":12},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardsTwoColumn.tsx"]}," - Main pattern component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardsTwoColumn.scss"]}," - Section layout and spacing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["index.ts"]}," - Barrel exports"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["README.md"]}," - This documentation"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-components","__idx":13},"children":["Related Components"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TextCard"]},": Core component for individual cards (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/components/TextCard"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PageGrid"]},": Layout wrapper for the section"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":14},"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/MP5gjNp7yPBnKBKleb8LRL/Section-Cards---Two-Column"},"children":["Section Cards - Two Column"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase Page"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/showcase/cards-two-column"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component Location"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/sections/CardsTwoColumn/"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"version-history","__idx":15},"children":["Version History"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["January 2026"]},": Initial implementation",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Header section with title and description"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["2×2 card grid with six color variants"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Window shade hover animation (desktop); instant pressed overlay below ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full responsive design"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dark mode support for section and cards"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Disabled state support for light and dark modes"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["April 2026"]},": Documentation aligned with TextCard (visited, focus, tablet/mobile neutrals); showcase path corrected"]}]}]},"headings":[{"value":"CardsTwoColumn Pattern","id":"cardstwocolumn-pattern","depth":1},{"value":"Features","id":"features","depth":2},{"value":"Usage","id":"usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"TextCardProps","id":"textcardprops","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Desktop (≥992px)","id":"desktop-992px","depth":3},{"value":"Tablet (576–991px)","id":"tablet-576991px","depth":3},{"value":"Mobile (<576px)","id":"mobile-576px","depth":3},{"value":"Color & interaction (cards)","id":"color--interaction-cards","depth":2},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Typography Tokens","id":"typography-tokens","depth":2},{"value":"Files","id":"files","depth":2},{"value":"Related Components","id":"related-components","depth":2},{"value":"Design References","id":"design-references","depth":2},{"value":"Version History","id":"version-history","depth":2}],"frontmatter":{"seo":{"title":"CardsTwoColumn Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/CardsTwoColumn/README.md"},"lastModified":"2026-04-10T23:33:25.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/sections/cardstwocolumn/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}