CardTextIconCard displays an icon at the top, followed by a heading and description. The description accepts ReactNode, so it can include hyperlinks and other rich content. No buttons; links are inline within the description.

Features

Icon + Text Layout: Icon container, heading, and description in a vertical stack (optional)
Rich Description: description accepts ReactNode for inline links and formatted content
Aspect Ratio Foundation: Optional aspectRatio prop for future responsive sizing
Light/Dark Mode: Full theming support
Responsive Design: Adaptive icon size and spacing across breakpoints

Usage

Basic Usage

<CardTextIconCard
  icon="/icons/docs.svg"
  iconAlt="Documentation"
  heading="Documentation"
  description="Access everything you need to get started with the XRPL."
/>

With Inline Link in Description

<CardTextIconCard
  icon="/icons/docs.svg"
  heading="Documentation"
  description={
    <>
      Learn more in our{' '}
      <a href="/docs">documentation</a>.
    </>
  }
/>

Inline <a> tags in the description share the card’s description styles in CardTextIconCard.scss. In light mode, global html.light link rules can compete with those styles; use BdsLink with the design-system bds-link class if you need consistent BDS link behavior, or see CardTextIconCard.scss for .bds-card-text-icon-card__description link styling.

With Aspect Ratio

<CardTextIconCard
  icon="/icons/docs.svg"
  heading="Documentation"
  description="Access everything you need."
  aspectRatio={4 / 3}
/>

Props

CardTextIconCardProps

Prop	Type	Default	Description
`icon`	`string`	-	Icon image URL
`iconAlt`	`string`	`''`	Alt text for the icon image
`heading`	`string`	Required	Card heading
`headingAs`	`'h1'`–`'h6'`	`'h3'`	Semantic heading element, so cards enter the document outline. Use a level that fits the page hierarchy (typically one below the section heading).
`description`	`React.ReactNode`	Required	Card description; accepts rich content (e.g., text with inline links)
`aspectRatio`	`number`	-	Optional ratio for future use; applied via CSS variable
`gridColSpan`	`ResponsiveValue<PageGridSpanValue>`	-	When provided, the card renders as `PageGrid.Col as="li"` with this span, becoming the grid column itself. See Grid integration.
`height`	`number`	-	Explicit `height` attribute for the icon image
`width`	`number`	-	Explicit `width` attribute for the icon image
`className`	`string`	-	Additional CSS classes

Grid integration

The card has two rendering modes:

Standalone (default) — renders a plain <div class="bds-card-text-icon-card">. Use this when you're placing the card inside your own layout.
Grid column — when gridColSpan is provided, the card renders as PageGrid.Col as="li" with the modifier class bds-card-text-icon-card--grid-col. The card is the grid column, so it must sit inside a PageGrid.Row as="ul".

This is how CardsTextGrid and CardsIconGrid consume it — both pass gridColSpan={{ base: 4, md: 4, lg: 6 }}.

<PageGrid.Row as="ul">
  <CardTextIconCard
    heading="Documentation"
    description="Access everything you need."
    gridColSpan={{ base: 4, md: 4, lg: 6 }}
  />
</PageGrid.Row>

Heading levels

headingAs defaults to 'h3'. Because these cards are usually rendered under a section heading, set it explicitly when h3 would skip a level:

<CardTextIconCard
  heading="Documentation"
  headingAs="h4"
  description="Access everything you need."
/>

Component Structure

<>
  <div className="bds-card-text-icon-card__icon">
    {icon && (  
    <img
      src={icon}
      alt={iconAlt}
      {...(iconHeight != null && { height: iconHeight })}
      {...(iconWidth != null && { width: iconWidth })}
      className="bds-card-text-icon-card__icon-img"
    />
    )}
    <strong className="bds-card-text-icon-card__heading sh-md-r">{heading}</strong>
  </div>
  <p className="bds-card-text-icon-card__description body-l">
    {description}
  </p>  
</>

Responsive Sizing

Breakpoint	Icon Size	Padding	Gap
Base (< 576px)	32px	16px	16px
MD (576px - 991px)	36px	20px	20px
LG (≥ 992px)	40px	32px	24px

Files

CardTextIconCard.tsx - React component with TypeScript
CardTextIconCard.scss - Styles with BEM naming
index.ts - Barrel exports
README.md - This file

Import

import { CardTextIconCard } from 'shared/components/CardTextIcon';
// or
import { CardTextIconCard, type CardTextIconCardProps } from 'shared/components/CardTextIcon';

Design System

Part of the Brand Design System (BDS) with bds- namespace prefix.

README.md Unescape Escape

CardTextIconCard Component

Overview