FeatureTwoColumn Pattern

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.

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.

Layout is implemented as a single flex structure (no separate mobile/desktop markup): below the desktop breakpoint, media always appears above content so stacked sections read consistently as media → content → media → content. The arrange prop only affects desktop (≥992px), where it alternates content left vs. content right.

• Highlighting a specific feature, product, or use case
• Presenting content with supporting visual media
• Creating visual variety with alternating left/right arrangements on desktop
• When 1-5 action links are needed as a uniform set of text links (no primary/secondary hierarchy)

The component renders a ButtonGroup from the links you pass.

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 ButtonGroup's default count-based mix. It passes forceEmphasis="subtle", which renders the set as Links sitting flush with the title and description.

Only the layout still varies with the count:

Background tokens are defined in FeatureTwoColumn.scss ($bds-feature-variants). At a glance:

• Neutral: Light neutral background (dark mode uses a slightly darker neutral)
• Lilac, Yellow, Green: Theme-colored backgrounds (light/dark pairs in SCSS)

• left (default, desktop): Content column on the left, media on the right (50% / 50% row).
• right (desktop): Media on the left, content on the right (flex-direction: row-reverse at ≥992px).
• Mobile and tablet: arrange does not change stacking; media is always on top, then content, so repeated sections keep the same vertical rhythm.

import { FeatureTwoColumn } from 'shared/sections/FeatureTwoColumn';

function MyPage() {
  return (
    <FeatureTwoColumn
      color="lilac"
      arrange="left"
      title="Institutions"
      description="Banks, asset managers, PSPs, and fintechs use XRPL to build financial products and DeFi solutions efficiently and with more flexibility."
      links={[
        { label: "Get Started", href: "/docs" },
        { label: "Learn More", href: "/about" }
      ]}
      media={{ src: "/img/institutions.png", alt: "Institutions illustration" }}
    />
  );
}

<FeatureTwoColumn
  color="green"
  arrange="right"
  title="Developers"
  description="Build powerful applications on XRPL with comprehensive documentation and tools."
  links={[{ label: "View Documentation", href: "/docs" }]}
  media={{ src: "/img/dev.png", alt: "Developer tools" }}
/>

<FeatureTwoColumn
  color="yellow"
  arrange="left"
  title="Enterprise Solutions"
  description="Scale your business with blockchain technology."
  links={[
    { label: "Contact Sales", href: "/contact" },
    { label: "Learn More", href: "/enterprise" }
  ]}
  media={{ src: "/img/enterprise.png", alt: "Enterprise" }}
/>

<FeatureTwoColumn
  color="neutral"
  arrange="left"
  title="Explore XRPL"
  description="Discover all the ways to interact with the XRP Ledger."
  links={[
    { label: "Documentation", href: "/docs" },
    { label: "Tutorials", href: "/tutorials" },
    { label: "API Reference", href: "/api" },
    { label: "Community", href: "/community" },
    { label: "GitHub", href: "/github" }
  ]}
  media={{ src: "/img/explore.png", alt: "Explore XRPL" }}
/>

Implementation details live in FeatureTwoColumn.scss. Summary:

• Layout: One row, two equal-width columns (width: 50% each), square (1:1) media column.
• arrange: left = content | media; right = media | content.
• Content column: Internal CSS grid (6 tracks) offsets the text block; vertical padding 96px.
• Media: <img> with object-fit: cover filling the media column (no separate background-image layout).

• Layout: Stacked column; media on top, content below (flex-direction: column-reverse on the layout wrapper).
• Media: 16:9 aspect ratio.
• Content column: Vertical padding 80px; inner grid uses 8 columns with inset content span.

• Layout: Same stacking as tablet — media on top, then content.
• Media: 1:1 aspect ratio.
• Content column: Vertical padding 64px; inner grid uses 4 columns (full-width content span).

FeatureTwoColumn (<section>)
└── .bds-feature-two-column__layout (flex: column-reverse < lg; row ≥ lg; row-reverse ≥ lg when arrange=right)
    ├── .bds-feature-two-column__content-col
    │   └── .bds-feature-two-column__content-grid (responsive column grid + horizontal padding)
    │       └── .bds-feature-two-column__content-wrapper (grid placement)
    │           └── .bds-feature-two-column__content [+ .bds-feature-two-column__content--multiple when 3+ links]
    │               ├── .bds-feature-two-column__text-group
    │               │   ├── .bds-feature-two-column__title (<h2>, heading-md)
    │               │   └── .bds-feature-two-column__description (<p>, body-l)
    │               └── ButtonGroup (when links present)
    └── .bds-feature-two-column__media-col
        └── .bds-feature-two-column__media
            └── .bds-feature-two-column__media-img (<img>)

• Uses semantic <section> for the pattern container.
• Title uses <h2> for document outline.
• Media uses a real <img> with required alt text.
• Buttons inherit accessible behavior from the Button / ButtonGroup components.
• Note: On viewports below desktop, visual order is media then content, but 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.

• Figma Design: Pattern - Feature - Two Column
• Component Location: shared/sections/FeatureTwoColumn/
• Color Tokens: styles/_colors.scss
• Typography: styles/_font.scss