Card

Card component is a container for text, photos, and actions in the context of a single subject. It accepts children which can be any ReactNode.

Usage

import { Card } from '@elegantui/atoms';

Basic Example

import { Card } from '@elegantui/atoms';

export default function App() {
  return (
    <Card style={{ marginTop: '1rem', width: '50%', height: '10rem' }}>
      <h3 style={{ marginTop: '0', color: 'gray' }}>A Basic Card</h3>
    </Card>
  );
}

Variants

Card component is available in three variants.

import { Card } from '@elegantui/atoms';

export default function App() {
  return (
    <Card
      style={{ color: 'gray', width: '50%', height: '5rem' }}
      variant='raised' // 'flat' | 'bordered'
    >
      A Basic Card
    </Card>
  );
}

Rounded

Card component can have rounded borders by using the rounded prop.

Available Props