Skip to main content
The Card component provides a structured container for organizing related content, commonly used for displaying information in a visually distinct section.

​
Basic usage

import { FlxCard, FlxCardContent } from '@flowx/react-ui-toolkit';

function BasicCard() {
  return (
    <FlxCard>
      <FlxCardContent>
        <p>This is the card content.</p>
      </FlxCardContent>
    </FlxCard>
  );
}

​
Card styles

The Card component supports two visual styles: 
<FlxCard cardStyle="border">
  <FlxCardContent>
    Card with border style
  </FlxCardContent>
</FlxCard>
A card with a border outline.

​
With header and title

Create cards with structured header sections: 
import { 
  FlxCard, 
  FlxCardHeader, 
  FlxCardTitle, 
  FlxCardContent 
} from '@flowx/react-ui-toolkit';

function CardWithHeader() {
  return (
    <FlxCard cardStyle="raised">
      <FlxCardHeader>
        <FlxCardTitle>User Profile</FlxCardTitle>
      </FlxCardHeader>
      <FlxCardContent>
        <p>Name: John Doe</p>
        <p>Email: john@example.com</p>
      </FlxCardContent>
    </FlxCard>
  );
}

​
Complete card structure

Use all card sub-components for a fully structured layout: 
import { 
  FlxCard, 
  FlxCardHeader, 
  FlxCardTitle, 
  FlxCardSubtitle, 
  FlxCardContent 
} from '@flowx/react-ui-toolkit';

function CompleteCard() {
  return (
    <FlxCard cardStyle="raised">
      <FlxCardHeader>
        <FlxCardTitle>Project Overview</FlxCardTitle>
        <FlxCardSubtitle>Q4 2024 Performance</FlxCardSubtitle>
      </FlxCardHeader>
      <FlxCardContent>
        <div>
          <h4>Key Metrics</h4>
          <ul>
            <li>Revenue: $1.2M</li>
            <li>Users: 15,000</li>
            <li>Growth: 25%</li>
          </ul>
        </div>
      </FlxCardContent>
    </FlxCard>
  );
}

​
Interactive cards

Make cards interactive with click handlers: 
import { FlxCard, FlxCardContent } from '@flowx/react-ui-toolkit';

function InteractiveCard() {
  const handleCardClick = () => {
    console.log('Card clicked');
  };

  return (
    <FlxCard 
      cardStyle="border"
      onClick={handleCardClick}
      style={{ cursor: 'pointer' }}
      tabIndex={0}
      role="button"
    >
      <FlxCardContent>
        <p>Click me!</p>
      </FlxCardContent>
    </FlxCard>
  );
}

​
Card grid layout

Display multiple cards in a responsive grid: 
import { FlxCard, FlxCardHeader, FlxCardTitle, FlxCardContent } from '@flowx/react-ui-toolkit';

function CardGrid() {
  const cards = [
    { id: 1, title: 'Card 1', content: 'Content 1' },
    { id: 2, title: 'Card 2', content: 'Content 2' },
    { id: 3, title: 'Card 3', content: 'Content 3' },
  ];

  return (
    <div style={{ 
      display: 'grid', 
      gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
      gap: '16px' 
    }}>
      {cards.map(card => (
        <FlxCard key={card.id} cardStyle="raised">
          <FlxCardHeader>
            <FlxCardTitle>{card.title}</FlxCardTitle>
          </FlxCardHeader>
          <FlxCardContent>
            <p>{card.content}</p>
          </FlxCardContent>
        </FlxCard>
      ))}
    </div>
  );
}

​
With custom actions

Add action buttons in the card header: 
import { FlxCard, FlxCardHeader, FlxCardTitle, FlxCardContent, FlxButton, FlxIcon } from '@flowx/react-ui-toolkit';

function CardWithActions() {
  return (
    <FlxCard cardStyle="raised">
      <FlxCardHeader style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <FlxCardTitle>Settings</FlxCardTitle>
        <FlxButton 
          variant="text" 
          icon="center"
          iconComponent={<FlxIcon name="settings" />}
          aria-label="Edit settings"
        />
      </FlxCardHeader>
      <FlxCardContent>
        <p>Configure your preferences here.</p>
      </FlxCardContent>
    </FlxCard>
  );
}

​
Props

​
FlxCard

​
cardStyle
'border' | 'raised'
default:"border"
The visual style of the card. border shows an outline, while raised adds elevation and shadow.
​
className
string
Additional CSS classes to apply to the card container.
​
children
React.ReactNode
required
The content to display inside the card, typically using card sub-components.

​
FlxCardHeader

​
children
React.ReactNode
required
The content of the header section, typically containing FlxCardTitle and FlxCardSubtitle.
​
className
string
Additional CSS classes for the header section.

​
FlxCardTitle

​
children
React.ReactNode
required
The title text or content.
​
className
string
Additional CSS classes for the title.

​
FlxCardSubtitle

​
children
React.ReactNode
required
The subtitle text or content.
​
className
string
Additional CSS classes for the subtitle.

​
FlxCardContent

​
children
React.ReactNode
required
The main content of the card.
​
className
string
Additional CSS classes for the content section.

​
TypeScript

The Card component and its sub-components are fully typed: 
import type { FlxCardProps } from '@flowx/react-ui-toolkit';

const cardConfig: FlxCardProps = {
  cardStyle: 'raised',
  className: 'custom-card',
};

​
Accessibility

  • Semantic HTML structure with proper heading hierarchy
  • Support for all standard HTML attributes
  • When making cards interactive, include proper ARIA attributes and keyboard support
Use the raised card style to create visual hierarchy and draw attention to important content sections.

Build docs developers (and LLMs) love

Get started for freeTalk to us