{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"FeatureTwoColumn 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":"featuretwocolumn-pattern","__idx":0},"children":["FeatureTwoColumn Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A feature section pattern that pairs editorial content with a media element in a two-column layout. Designed for showcasing features, products, or use cases with a uniform tertiary link treatment."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["FeatureTwoColumn supports four color theme variants (neutral, lilac, yellow, green) and adapts responsively across desktop, tablet, and mobile breakpoints. Links always render as tertiary buttons; only their layout adjusts to the number provided."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Layout is implemented as a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["single flex structure"]}," (no separate mobile/desktop markup): ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["below the desktop breakpoint, media always appears above content"]}," so stacked sections read consistently as media → content → media → content. The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["arrange"]}," prop only affects desktop"]}," (≥992px), where it alternates content left vs. content right."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"when-to-use","__idx":2},"children":["When to Use"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Highlighting a specific feature, product, or use case"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Presenting content with supporting visual media"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Creating visual variety with alternating left/right arrangements ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["on desktop"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["When 1-5 action links are needed as a uniform set of text links (no primary/secondary hierarchy)"]}]},{"$$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":["color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral' | 'lilac' | 'yellow' | 'green'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'neutral'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color theme variant"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["arrange"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'left' | 'right'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'left'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Desktop only:"]}," content column on the left (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["left"]},") or right (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["right"]},"). Below desktop, layout is always media on top, then content."]}]},{"$$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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Feature title text (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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Feature description text (body-l typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FeatureTwoColumnLink[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of 1-5 links, all rendered as tertiary buttons (see button behavior below)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["media"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ src: string; alt: string }"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Feature media (image) configuration"]}]},{"$$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":"featuretwocolumnlink","__idx":4},"children":["FeatureTwoColumnLink"]},{"$$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":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$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":["label"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Link 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":["Link URL"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"button-behavior","__idx":5},"children":["Button Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component renders a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," from the links you pass."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Every link renders the same, regardless of count."]}," This section pairs its"," ","links with editorial copy, so the design calls for one uniform text-link"," ","treatment rather than ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]},"'s default count-based mix. It passes"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["forceEmphasis=\"subtle\""]},", which renders the set as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]},"s sitting flush with"," ","the title and description."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Only the layout still varies with the count:"]},{"$$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":"Link Count"},"children":["Link Count"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Layout"},"children":["Layout"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["1-2 links"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Inline (stacks on mobile, row at md+), 16px gap / 24px at lg+"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["3-5 links"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Vertical block layout on all screen sizes (per ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," rules)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"variants","__idx":6},"children":["Variants"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color-themes","__idx":7},"children":["Color Themes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Background tokens are defined in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FeatureTwoColumn.scss"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$bds-feature-variants"]},"). At a glance:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Neutral"]},": Light neutral background (dark mode uses a slightly darker neutral)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Lilac"]},", ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Yellow"]},", ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Green"]},": Theme-colored backgrounds (light/dark pairs in SCSS)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"arrangement--arrange-","__idx":8},"children":["Arrangement (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["arrange"]},")"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["left"]}," (default, desktop):"]}," Content column on the left, media on the right (50% / 50% row)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["right"]}," (desktop):"]}," Media on the left, content on the right (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flex-direction: row-reverse"]}," at ≥992px)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mobile and tablet:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["arrange"]}," does not change stacking; ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["media is always on top"]},", then content, so repeated sections keep the same vertical rhythm."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":9},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { FeatureTwoColumn } from 'shared/sections/FeatureTwoColumn';\n\nfunction MyPage() {\n  return (\n    <FeatureTwoColumn\n      color=\"lilac\"\n      arrange=\"left\"\n      title=\"Institutions\"\n      description=\"Banks, asset managers, PSPs, and fintechs use XRPL to build financial products and DeFi solutions efficiently and with more flexibility.\"\n      links={[\n        { label: \"Get Started\", href: \"/docs\" },\n        { label: \"Learn More\", href: \"/about\" }\n      ]}\n      media={{ src: \"/img/institutions.png\", alt: \"Institutions illustration\" }}\n    />\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":10},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"single-link","__idx":11},"children":["Single Link"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeatureTwoColumn\n  color=\"green\"\n  arrange=\"right\"\n  title=\"Developers\"\n  description=\"Build powerful applications on XRPL with comprehensive documentation and tools.\"\n  links={[{ label: \"View Documentation\", href: \"/docs\" }]}\n  media={{ src: \"/img/dev.png\", alt: \"Developer tools\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"two-links-inline","__idx":12},"children":["Two Links (inline)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeatureTwoColumn\n  color=\"yellow\"\n  arrange=\"left\"\n  title=\"Enterprise Solutions\"\n  description=\"Scale your business with blockchain technology.\"\n  links={[\n    { label: \"Contact Sales\", href: \"/contact\" },\n    { label: \"Learn More\", href: \"/enterprise\" }\n  ]}\n  media={{ src: \"/img/enterprise.png\", alt: \"Enterprise\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"multiple-links-3-5-block-layout","__idx":13},"children":["Multiple Links (3-5, block layout)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeatureTwoColumn\n  color=\"neutral\"\n  arrange=\"left\"\n  title=\"Explore XRPL\"\n  description=\"Discover all the ways to interact with the XRP Ledger.\"\n  links={[\n    { label: \"Documentation\", href: \"/docs\" },\n    { label: \"Tutorials\", href: \"/tutorials\" },\n    { label: \"API Reference\", href: \"/api\" },\n    { label: \"Community\", href: \"/community\" },\n    { label: \"GitHub\", href: \"/github\" }\n  ]}\n  media={{ src: \"/img/explore.png\", alt: \"Explore XRPL\" }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":14},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation details live in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FeatureTwoColumn.scss"]},". Summary:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"desktop-992px","__idx":15},"children":["Desktop (≥992px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Layout:"]}," One row, two equal-width columns (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width: 50%"]}," each), square (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1:1"]},") media column."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["arrange"]},":"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["left"]}," = content | media; ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["right"]}," = media | content."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content column:"]}," Internal CSS grid (6 tracks) offsets the text block; vertical padding 96px."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Media:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<img>"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object-fit: cover"]}," filling the media column (no separate background-image layout)."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tablet-576px---991px","__idx":16},"children":["Tablet (576px - 991px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Layout:"]}," Stacked column; ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["media on top"]},", content below (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flex-direction: column-reverse"]}," on the layout wrapper)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Media:"]}," 16:9 aspect ratio."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content column:"]}," Vertical padding 80px; inner grid uses 8 columns with inset content span."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mobile-576px","__idx":17},"children":["Mobile (<576px)"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Layout:"]}," Same stacking as tablet — ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["media on top"]},", then content."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Media:"]}," 1:1 aspect ratio."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Content column:"]}," Vertical padding 64px; inner grid uses 4 columns (full-width content span)."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"anatomy","__idx":18},"children":["Anatomy"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"FeatureTwoColumn (<section>)\n└── .bds-feature-two-column__layout (flex: column-reverse < lg; row ≥ lg; row-reverse ≥ lg when arrange=right)\n    ├── .bds-feature-two-column__content-col\n    │   └── .bds-feature-two-column__content-grid (responsive column grid + horizontal padding)\n    │       └── .bds-feature-two-column__content-wrapper (grid placement)\n    │           └── .bds-feature-two-column__content [+ .bds-feature-two-column__content--multiple when 3+ links]\n    │               ├── .bds-feature-two-column__text-group\n    │               │   ├── .bds-feature-two-column__title (<h2>, heading-md)\n    │               │   └── .bds-feature-two-column__description (<p>, body-l)\n    │               └── ButtonGroup (when links present)\n    └── .bds-feature-two-column__media-col\n        └── .bds-feature-two-column__media\n            └── .bds-feature-two-column__media-img (<img>)\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":19},"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-feature-two-column"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Root ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<section>"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column--neutral"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Neutral color theme"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column--lilac"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Lilac color theme"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column--yellow"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yellow color theme"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column--green"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green color theme"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column--left"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop: content left (default row order)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column--right"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Desktop: content right (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["row-reverse"]}," at ≥992px)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__layout"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Flex wrapper for content + media columns"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__content-col"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content column (padding, half width on desktop)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__content-grid"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Inner grid for horizontal alignment of copy"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__content-wrapper"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Grid cell spanning the intended columns"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__content"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Flex column for text group + buttons"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__content--multiple"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Modifier when three or more links (adjusted flex gaps)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__text-group"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Title + description container"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__title"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Title heading"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__description"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Description text"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__media-col"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Media column wrapper"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__media"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Media aspect-ratio box"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bds-feature-two-column__media-img"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Image element"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"accessibility","__idx":20},"children":["Accessibility"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Uses semantic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<section>"]}," for the pattern container."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Title uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<h2>"]}," for document outline."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Media uses a real ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<img>"]}," with required ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alt"]}," text."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Buttons inherit accessible behavior from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Button"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ButtonGroup"]}," components."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," On viewports below desktop, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["visual order"]}," is media then content, but ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["DOM order"]}," remains content subtree first, then media. Keyboard and screen-reader order follow the DOM; if reading order must match the visual stack, consider page-level structure or future enhancements."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"design-references","__idx":21},"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/3tmqxMrEvOVvpYhgOCxv2D/Pattern-Feature---Two-Column?node-id=20017-3501&m=dev"},"children":["Pattern - Feature - Two Column"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component Location"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/sections/FeatureTwoColumn/"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Color Tokens"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_colors.scss"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Typography"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_font.scss"]}]}]}]},"headings":[{"value":"FeatureTwoColumn Pattern","id":"featuretwocolumn-pattern","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"When to Use","id":"when-to-use","depth":2},{"value":"Props","id":"props","depth":2},{"value":"FeatureTwoColumnLink","id":"featuretwocolumnlink","depth":3},{"value":"Button Behavior","id":"button-behavior","depth":2},{"value":"Variants","id":"variants","depth":2},{"value":"Color Themes","id":"color-themes","depth":3},{"value":"Arrangement ( arrange )","id":"arrangement--arrange-","depth":3},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"Single Link","id":"single-link","depth":3},{"value":"Two Links (inline)","id":"two-links-inline","depth":3},{"value":"Multiple Links (3-5, block layout)","id":"multiple-links-3-5-block-layout","depth":3},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"Desktop (≥992px)","id":"desktop-992px","depth":3},{"value":"Tablet (576px - 991px)","id":"tablet-576px---991px","depth":3},{"value":"Mobile (<576px)","id":"mobile-576px","depth":3},{"value":"Anatomy","id":"anatomy","depth":2},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Accessibility","id":"accessibility","depth":2},{"value":"Design References","id":"design-references","depth":2}],"frontmatter":{"seo":{"title":"FeatureTwoColumn Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/FeatureTwoColumn/FeatureTwoColumn.md"},"lastModified":"2026-08-25T04:24:09.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/sections/featuretwocolumn/featuretwocolumn-2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}