Curriculum
A course or book curriculum.
View code
<Curriculum
summary={
<StatStrip>
<StatStrip.Item label="Chapters">12</StatStrip.Item>
<StatStrip.Item label="Pages">286</StatStrip.Item>
<StatStrip.Item label="Videos">18</StatStrip.Item>
<StatStrip.Item label="Hours of video">4.5</StatStrip.Item>
</StatStrip>
}
>
<Curriculum.Part title="Foundations" meta="4 chapters · 86 pages">
<Curriculum.Lesson number="01" title="Why type is code" meta="18 pages" badge="Free">
<CheckList>
<CheckRow>Glyphs, fonts and the files that carry them</CheckRow>
<CheckRow>What a browser does between bytes and pixels</CheckRow>
</CheckList>
<Link href="/sample.pdf">Read the chapter</Link>
</Curriculum.Lesson>
<Curriculum.Lesson number="02" title="The measure" meta="22 pages" />
…
</Curriculum.Part>
<Curriculum.Part title="Systems" meta="4 chapters · 104 pages">…</Curriculum.Part>
<Curriculum.Part title="Shipping" meta="4 chapters · 96 pages">…</Curriculum.Part>
</Curriculum>
<Curriculum layout="stack">…</Curriculum>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { Curriculum } from "@sdxc/ui/landing";Lays the optional summary over the parts, and opens a heading scope so part titles sit one level under the band's title.
Composition
The parts the component publishes, each a static property of the host.
CurriculumCurriculum.PartOne part: its title and totals over a ruled list of lessons.Curriculum.LessonOne lesson as a native disclosure row: the summary shows the chevron, number, title, badge and meta; the children open under the title and the chevron turns while open.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
layout | "columns" | "stack" | No | Arrangement. Defaults to DEFAULT_LAYOUT. |
summary | RemixNode | No | Totals above the parts, such as a StatStrip of chapters, pages and hours. |
children | RemixNode | Yes | Curriculum.Part children. |
Also accepts everything in TagProps<"div">.
Curriculum.Part
| Prop | Type | Required | Description |
|---|---|---|---|
title | RemixNode | Yes | The part's title, rendered as a heading at the ambient depth. |
meta | RemixNode | No | The part's totals, such as "5 chapters · 112 pages". |
children | RemixNode | Yes | Curriculum.Lesson children. |
Also accepts everything in Omit<TagProps<"section">, "title">.
Curriculum.Lesson
| Prop | Type | Required | Description |
|---|---|---|---|
number | RemixNode | Yes | The lesson's number as shown, such as "01". |
title | RemixNode | Yes | The lesson's title. |
meta | RemixNode | No | Length at the row's inline end, such as "18 pages" or "12 min". |
badge | RemixNode | No | A short flag after the title, such as "Free" or "Preview", drawn as a Badge. |
open | boolean | No | Starts the lesson expanded. |
children | RemixNode | No | What opens under the row: subtopics, usually a CheckList, and a preview link. Without children the row is static and draws no chevron. |
Also accepts everything in Omit<TagProps<"li">, "title">.
Types
| Name | Values | What it decides |
|---|---|---|
Layout | "columns" | "stack" | How parts sit: side by side from the lg container (columns), or one under the other at every width (stack) for a course with many or long parts. |