Card

v1.0.0

Content container for grouped UI sections and widgets.

Import

import { Card } from '@meteorack/sdk-react';

How To Use It

Wrap related settings, metrics, or actions in a single panel so the page is easier to scan.
Prefer multiple focused cards over one long mixed section when the content has different responsibilities.

Works Well With

PageHeader Button Notice

Props

padding?: 'sm' | 'md' | 'lg'

Controls the internal spacing of the card body.

className?: string

Optional class name for the outer card element.

Example

Card.tsx

import { Card, Badge, Button } from '@meteorack/sdk-react';

export function StatusCard() {
  return (
    <Card padding="md">
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '12px',
        }}
      >
        <strong>Health check</strong>
        <Badge variant="success">Healthy</Badge>
      </div>
      <Button variant="secondary" size="sm">
        View details
      </Button>
    </Card>
  );
}

PreviousButton NextBadge