CardDouble

Import

import { CardDouble, CardDoubleInner } from 'tuimorphic';

Basic Usage

SYSTEM INFO

System status: OK

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

<CardDouble title="SYSTEM INFO">
  <p>System status: OK</p>
  <p>Last checked: 2024-01-15 14:32:00 UTC</p>
</CardDouble>

Props

Prop	Type	Default	Description
`title`	`string`	—	Title displayed in the card header
`leftCorner`	`string`	—	Left corner label text
`rightCorner`	`string`	—	Right corner label text
`children`*	`React.ReactNode`	—	Card content
`className`	`string`	—	Additional CSS class names

CardDoubleInner Props

Prop	Type	Default	Description
`title`	`string`	—	Title displayed in the inner card header
`children`*	`React.ReactNode`	—	Inner card content
`className`	`string`	—	Additional CSS class names

Variants

With Corner Labels

Use corner labels to add window-style decorations:

[1]

MAIN WINDOW

[X]

Double-bordered container with corner labels.

Perfect for terminal-style dialogs and windows.

<CardDouble title="MAIN WINDOW" leftCorner="[1]" rightCorner="[X]">
  <p>Double-bordered container with corner labels.</p>
  <p>Perfect for terminal-style dialogs and windows.</p>
</CardDouble>

Nested Cards

Use CardDoubleInner for multi-level nesting:

APPLICATION

SETTINGS

Theme: Dark

Font: Unifont

STATUS

Connection: Active

Uptime: 12:34:56

<CardDouble title="APPLICATION">
  <CardDoubleInner title="SETTINGS">
    <p>Theme: Dark</p>
    <p>Font: Unifont</p>
  </CardDoubleInner>
  <CardDoubleInner title="STATUS">
    <p>Connection: Active</p>
    <p>Uptime: 12:34:56</p>
  </CardDoubleInner>
</CardDouble>

Multiple Cards

Use multiple CardDouble components for dashboards:

[OK]

SERVER 01

CPU: 45% | MEM: 2.1GB | NET: 12Mbps

[OK]

SERVER 02

CPU: 62% | MEM: 3.4GB | NET: 8Mbps

[!!]

SERVER 03

[!]

CPU: 92% | MEM: 7.8GB | NET: 2Mbps

<CardDouble title="SERVER 01" leftCorner="[OK]">
  <p>CPU: 45% | MEM: 2.1GB | NET: 12Mbps</p>
</CardDouble>
<CardDouble title="SERVER 02" leftCorner="[OK]">
  <p>CPU: 62% | MEM: 3.4GB | NET: 8Mbps</p>
</CardDouble>
<CardDouble title="SERVER 03" leftCorner="[!!]" rightCorner="[!]">
  <p>CPU: 92% | MEM: 7.8GB | NET: 2Mbps</p>
</CardDouble>

Accessibility

Uses semantic <article> elements for proper document structure
Header titles use appropriate heading levels (<h2>, <h3>)
Corner labels are marked with aria-hidden when empty

Styling

CardDouble uses CSS custom properties for theming:

Variable	Description
`--theme-border`	Border color for double-line borders
`--theme-background`	Card background color
`--theme-foreground`	Text color

On this page