xrpl-dev-portal/shared/components/CardTextIcon

CardTextIconCard Component

A card component featuring an icon, heading, and description. Built from Section Cards - Icon and Section Cards - Text Grid Figma designs.

Overview

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	Optional	Icon image URL
iconAlt	string	''	Optional
heading	string	Required	Card 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
className	string	-	Additional CSS classes

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.