mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
b7db009786
* qa/section-cards: link colors, dark mode green TextCard, CardTextIconCard text color Co-Authored-By: Oz <oz-agent@warp.dev> * updating documentation, fix per QA feedback * removing important and css clean up --------- Co-authored-by: Oz <oz-agent@warp.dev>
119 lines
3.5 KiB
Markdown
119 lines
3.5 KiB
Markdown
# 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
|
||
|
||
```tsx
|
||
<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
|
||
|
||
```tsx
|
||
<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
|
||
|
||
```tsx
|
||
<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 | Alt text for the icon image |
|
||
| `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
|
||
|
||
```tsx
|
||
<>
|
||
<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
|
||
|
||
```tsx
|
||
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.
|