Website
Timeline
Career records, profile narratives and chronological lists.
Usage
When to reach for it
Ships from@misoto22/design/website
import { Timeline } from '@misoto22/design/website'Notes
An ordered collection frame. No sorting or business data is owned here.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
dated records
A chronological record retains its supplied dates, organization and supporting details. The host decides ordering and date formatting before rendering the timeline.
Experience
1 role- Period
- 2023 — present
- Location
- Remote
Product designer
- Designing practical tools for research and publishing.
- Working with small teams from prototype to delivery.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
RecordSection
A named ledger section. The host supplies its chronology without reordering.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| headingIdrequired | string | — | |
| titlerequired | string | — | |
| count | string | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.
CareerRecord
One dated record, reusable for a role, qualification or other chronology.
| Prop | Type | Default | Description |
|---|---|---|---|
| descriptionrequired | string[] | — | |
| locationrequired | string | — | |
| locationLabelrequired | string | — | |
| organizationrequired | ReactNode | — | |
| periodrequired | string | — | |
| periodLabelrequired | string | — | |
| tagsrequired | string[] | — | |
| tagsLabelrequired | string | — | |
| titlerequired | string | — | |
| currentLabel | string | — | |
| mark | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
ProfileSection
A profile section follows the same heading and spacing contract as its neighbors.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| headingIdrequired | string | — | |
| titlerequired | string | — | |
| description | string | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.
ProfileNarrative
A short introduction with a pull quote and a longer account alongside it.
| Prop | Type | Default | Description |
|---|---|---|---|
| headingIdrequired | string | — | |
| paragraphsrequired | string[] | — | |
| pullrequired | string | — | |
| titlerequired | string | — | |
| action | ReactNode | — |
ProfileSkills
Skill labels and theme-aware artwork, supplied by the host's content adapter.
| Prop | Type | Default | Description |
|---|---|---|---|
| groupsrequired | { id: string; title: string; items: ProfileSkill[] }[] | — |
ProfileInterests
A small set of interests or areas of practice.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | { id: string; title: string; description: string }[] | — |
ProfileFigure
Source-faithful profile photography: retain the supplied image's aspect ratio.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| caption | string | — |
TimelineItem
A record mount, isolated so motion can follow the shared data-motion axis.
Takes no props of its own.