Card

Container component with MS-DOS terminal aesthetics and configurable title positioning.

Import

import { Card } from 'tuimorphic';

Usage

The Card component provides a container with box-shadow borders and configurable title positioning, styled with MS-DOS terminal aesthetics.

A simple card without a title. Use cards to group related content.

<Card title="LOGIN">
  <Input label="Username" />
  <Button>Submit</Button>
</Card>

Props

Prop	Type	Default	Description
title	`React.ReactNode`	-	Title displayed in the card header
mode	`'left' \| 'right' \| 'center'`	`'center'`	Title alignment mode
children	`React.ReactNode`	-	Card content
className	`string`	-	Additional CSS class names

Variants

With Title

SYSTEM STATUS

All systems operational.

Last checked: 2024-01-15 14:32:00 UTC

<Card title="SETTINGS">
  <p>Card content with a title</p>
</Card>

Title Alignment

LEFT ALIGNED

Title aligned to the left with corner decoration.

CENTER ALIGNED

Title centered (default mode).

RIGHT ALIGNED

Title aligned to the right with corner decoration.

<Card title="LEFT ALIGNED" mode="left">
  <p>Content with left-aligned title</p>
</Card>
 
<Card title="CENTER ALIGNED" mode="center">
  <p>Content with centered title</p>
</Card>
 
<Card title="RIGHT ALIGNED" mode="right">
  <p>Content with right-aligned title</p>
</Card>

Without Title

<Card>
  <p>A card without a title</p>
</Card>

Form Container

<Card title="SETTINGS">
  <Input label="Name" />
  <Input label="Email" />
  <Button>Save</Button>
</Card>

On this page