Cards

Cards group related content into distinct, scannable containers: dashboard widgets, list items, or feature highlights. They give visual weight to content and show users what belongs together. The CTD Learns App has four Card variants defined in the theme: featureCard (dashboard tiles with CTAs), listCard (row items with actions), courseMaterials (content pages), and studentDashboard (data widgets). Always use a theme variant. Don't create one-off card styles in individual components.

Interactive Preview

Card — All theme variants

Workflows

Create and manage automated process workflows.

Props

variant

title

body

Variants

Feature Card

Calendar

Schedule and manage events, deadlines, and important dates across all CTD Learns activities.

variant="featureCard"
List Card
Onboarding
Active
Created 4/2/2026
variant="listCard"
Course Materials
Introduction To Databases And SQL

Learn the fundamentals of relational databases, SQL queries, and data management techniques essential for modern application development.

variant="courseMaterials"
Student Dashboard
Upcoming Deadlines

Assignment 3

Apr 10

Final Project

Apr 25

variant="studentDashboard"

Card Specs

Property
Value

Background

#FFFFFFsurfaceLight
·dark#1E1E20surfaceDark

Border

1px solid #E2E2E4gray200

Border radius

10pxradiusLg

Shadow

0 1px 3px rgba(0,0,0,0.08)shadow.card

Internal padding

24pxspacing.cardPadding

Code

Feature Card
<Card variant="featureCard">
  <CardContent>
    <Stack direction="row" alignItems="center" gap={1.5} mb={2}>
      <CalendarIcon sx={{ color: 'primary.main' }} />
      <Typography variant="h4">Calendar</Typography>
    </Stack>
    <Typography variant="body2" color="text.secondary" mb={3}>
      {description}
    </Typography>
    <Button variant="contained" fullWidth>
      View calendar
    </Button>
  </CardContent>
</Card>
List Card
<Card variant="listCard">
  <CardContent>
    <Typography variant="h5">Onboarding</Typography>
    <Chip label="Active" color="success" size="small" />
    <Button variant="contained" size="small">Manage</Button>
  </CardContent>
</Card>
Course Materials
<Card variant="courseMaterials">
  <CardContent>
    <Typography variant="h5" color="primary.main">
      Introduction To Databases And SQL
    </Typography>
    <Typography variant="body2">{description}</Typography>
  </CardContent>
</Card>
ButtonsInputs