CardsFeatured Pattern

A section pattern that displays a heading, description, and a responsive grid of CardImage components. Follows the "Logo Rectangle Grid" design from Figma.

Features

Responsive grid layout (1 column mobile, 2 tablet, 3 desktop)
Heading with h-md typography (Tobias Light)
Description with body-l typography (Booton Light)
Proper spacing using PageGrid for container and alignment
Full dark mode support

Usage

import { CardsFeatured } from 'shared/patterns/CardsFeatured';

<CardsFeatured
  heading="Trusted by Leaders in Real-World Asset Tokenization"
  description="Powering institutions and builders who are bringing real world assets on chain at global scale."
  cards={[
    {
      image: "/img/docs.png",
      imageAlt: "Documentation",
      title: "Documentation",
      subtitle: "Access everything you need to get started working with the XRPL.",
      buttonLabel: "Get Started",
      href: "/docs"
    },
    {
      image: "/img/tutorials.png",
      imageAlt: "Tutorials",
      title: "Tutorials",
      subtitle: "Step-by-step guides to help you build on the XRP Ledger.",
      buttonLabel: "View Tutorials",
      href: "/tutorials"
    },
    // ... more cards
  ]}
/>

Props

Prop	Type	Required	Description
`heading`	`React.ReactNode`	Yes	Section heading text
`description`	`React.ReactNode`	Yes	Section description text
`cards`	`CardsFeaturedCardConfig[]`	Yes	Array of card configurations (uses `CardImageProps`)
`className`	`string`	No	Additional CSS class names

CardsFeaturedCardConfig

Each card in the cards array accepts all props from CardImageProps:

Prop	Type	Required	Description
`image`	`string`	Yes	Image URL
`imageAlt`	`string`	Yes	Image alt text
`title`	`string`	Yes	Card title
`subtitle`	`string`	No	Card subtitle/description
`buttonLabel`	`string`	No	Button text
`href`	`string`	No	Link URL

Responsive Behavior

Breakpoint	Grid Columns	Vertical Padding
Mobile (< 768px)	1 column	48px
Tablet (768px - 1199px)	2 columns	64px
Desktop (≥ 1200px)	3 columns	80px

Design Tokens

Colors

Mode	Element	Color
Light	Heading	`$black` (#141414)
Light	Description	`$black` (#141414)
Dark	Heading	`$white` (#FFFFFF)
Dark	Description	`$white` (#FFFFFF)

Spacing

Header gap (heading to description): 8px mobile/tablet, 16px desktop
Section gap (header to cards): 24px mobile, 32px tablet, 40px desktop
Cards gap: 48px mobile (vertical), 8px tablet/desktop

CSS Classes

Class	Description
`.bds-cards-featured`	Base section container
`.bds-cards-featured__header`	Header wrapper for heading and description
`.bds-cards-featured__heading`	Section heading (uses `.h-md`)
`.bds-cards-featured__description`	Section description (uses `.body-l`)
`.bds-cards-featured__cards`	Cards grid container
`.bds-cards-featured__card-wrapper`	Individual card wrapper

Showcase

View the pattern showcase at: /about/cards-featured-showcase

3.3 KiB Raw Blame History