Components

Tutorial cards

Clickable card linking to a step-by-step tutorial. Title, description, step count, role badge.

3 tokens

Preview

Your first login

Log in, set your password, and explore the dashboard.

4 stepsAdmin

Adding students

Register students one by one or import from a spreadsheet.

5 stepsAdmin

Usage

import { TutorialCard } from '@/components/marketing/tutorial-card'
import { tutorials } from '@/lib/data/tutorials'

{tutorials.map((t) => <TutorialCard key={t.slug} tutorial={t} />)}

Tokens used

This component reads these tokens directly: change one on a Foundations page and it updates here and across the site.