Card

Overview

Card is a clickable list item. It renders as a <li> element and extends Box with fixed card styles.

• Interactive — role="button", tabIndex={0}, border on hover
• Box-based — All Box sprinkle props available
• Fixed styles — White background, rounded corners, drop shadow

Basic Usage

import { Card } from '@illog/ui'
 
<ul>
  <Card onClick={() => navigate(`/tasks/${task.id}`)}>
    <Text textStyle="bodyStrong">{task.title}</Text>
    <Text textStyle="bodySmall" color="textDefaultTertiary">
      {task.description}
    </Text>
  </Card>
</ul>

Width Control

<Card maxWidth="480px" onClick={handleClick}>
  <Text>Card with max width of 480px</Text>
</Card>

Default Applied Styles

Props

Guidelines

• Always use Card inside a <ul> or <ol> (renders as <li>)
• If you need a non-clickable container, use Box directly