Astryx Card

Cards

About

A bordered and elevated Astryx container for discrete, self-contained content and independently interactive items.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Card to your project and fits it to your theme.

Code

How Astryx Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {Card} from '@/components/ui/astryx-card';
import {Stack} from '@astryxdesign/core/Layout';
import {Grid} from '@astryxdesign/core/Grid';
import {Text, Heading} from '@astryxdesign/core/Text';

const LEVELS = [
  {elevation: 'none' as const, caption: 'Flat — sits on the page (default)'},
  {elevation: 'low' as const, caption: 'Low — lifts off slightly'},
  {elevation: 'med' as const, caption: 'Med — clearly raised'},
  {elevation: 'high' as const, caption: 'High — floats well above'},
];

function CardElevations() {
  return (
    <Grid columns={2} gap={4} width={520}>
      {LEVELS.map(({elevation, caption}) => (
        <Card key={elevation} elevation={elevation}>
          <Stack direction="vertical" gap={1}>
            <Heading level={4}>elevation=&quot;{elevation}&quot;</Heading>
            <Text type="supporting" color="secondary">
              {caption}
            </Text>
          </Stack>
        </Card>
      ))}
    </Grid>
  );
}

export default function CardElevationsDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <CardElevations />
    </div>
  );
}