xrpl-dev-portal/shared/sections/FeatureTwoColumn/FeatureTwoColumn.md

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.

Overview

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.

When to Use

• 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)

Props

Prop	Type	Default	Description
color	'neutral' | 'lilac' | 'yellow' | 'green'	'neutral'	Background color theme variant
arrange	'left' | 'right'	'left'	Desktop only: content column on the left (left) or right (right). Below desktop, layout is always media on top, then content.
title	string	required	Feature title text (heading-md typography)
description	string	required	Feature description text (body-l typography)
links	FeatureTwoColumnLink[]	required	Array of 1-5 links, all rendered as tertiary buttons (see button behavior below)
media	{ src: string; alt: string }	required	Feature media (image) configuration
className	string	-	Additional CSS classes

FeatureTwoColumnLink

Property	Type	Description
label	string	Link label text
href	string	Link URL

Button Behavior

The component renders a ButtonGroup from the links you pass.

Every link renders as a tertiary button, 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's implemented by passing forceVariant="tertiary" and forceNoPadding, so the buttons also sit flush with the title and description instead of being indented by the button's horizontal padding.

Only the layout still varies with the count:

Link Count	Layout
1-2 links	Inline (stacks on mobile, row at md+), 16px gap / 24px at lg+
3-5 links	Vertical block layout on all screen sizes (per ButtonGroup rules)

Variants

Color Themes

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)

Arrangement (arrange)

• 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.

Basic Usage

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" }}
    />
  );
}

Examples

Single Link

<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" }}
/>

Two Links (inline)

<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" }}
/>

Multiple Links (3-5, block layout)

<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" }}
/>

Responsive Behavior

Implementation details live in FeatureTwoColumn.scss. Summary:

Desktop (≥992px)

• 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).

Tablet (576px - 991px)

• 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.

Mobile (<576px)

• 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).

Anatomy

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>)

CSS Classes

Class	Description
.bds-feature-two-column	Root <section>
.bds-feature-two-column--neutral	Neutral color theme
.bds-feature-two-column--lilac	Lilac color theme
.bds-feature-two-column--yellow	Yellow color theme
.bds-feature-two-column--green	Green color theme
.bds-feature-two-column--left	Desktop: content left (default row order)
.bds-feature-two-column--right	Desktop: content right (row-reverse at ≥992px)
.bds-feature-two-column__layout	Flex wrapper for content + media columns
.bds-feature-two-column__content-col	Content column (padding, half width on desktop)
.bds-feature-two-column__content-grid	Inner grid for horizontal alignment of copy
.bds-feature-two-column__content-wrapper	Grid cell spanning the intended columns
.bds-feature-two-column__content	Flex column for text group + buttons
.bds-feature-two-column__content--multiple	Modifier when three or more links (adjusted flex gaps)
.bds-feature-two-column__text-group	Title + description container
.bds-feature-two-column__title	Title heading
.bds-feature-two-column__description	Description text
.bds-feature-two-column__media-col	Media column wrapper
.bds-feature-two-column__media	Media aspect-ratio box
.bds-feature-two-column__media-img	Image element

Accessibility

• 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.

Design References

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