# Timeline

Career records, profile narratives and chronological lists.

- Group: Website
- Import: `import { Timeline } from '@misoto22/folio/website'`
- Page: https://ui.misoto22.com/components/timeline/

## When to reach for it

Present dated work, education and personal background using supplied content.

## 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.

## RecordSection

A named ledger section. The host supplies its chronology without reordering.

### Props

- `title` (required) — `string`.
- `count` — `string`.
- `headingId` (required) — `string`.
- `children` (required) — `ReactNode`.

Also accepts: `HTMLAttributes<HTMLElement>`.

## CareerRecord

One dated record, reusable for a role, qualification or other chronology.

### Props

- `title` (required) — `string`.
- `organization` (required) — `ReactNode`.
- `period` (required) — `string`.
- `periodLabel` (required) — `string`.
- `location` (required) — `string`.
- `locationLabel` (required) — `string`.
- `description` (required) — `string[]`.
- `tags` (required) — `string[]`.
- `tagsLabel` (required) — `string`.
- `mark` — `ReactNode`.
- `currentLabel` — `string`.

Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.

## ProfileSection

A profile section follows the same heading and spacing contract as its neighbors.

### Props

- `headingId` (required) — `string`.
- `title` (required) — `string`.
- `description` — `string`.
- `children` (required) — `ReactNode`.

Also accepts: `HTMLAttributes<HTMLElement>`.

## ProfileNarrative

A short introduction with a pull quote and a longer account alongside it.

### Props

- `headingId` (required) — `string`.
- `title` (required) — `string`.
- `pull` (required) — `string`.
- `paragraphs` (required) — `string[]`.
- `action` — `ReactNode`.

## ProfileSkills

Skill labels and theme-aware artwork, supplied by the host's content adapter.

### Props

- `groups` (required) — `{ id: string; title: string; items: ProfileSkill[] }[]`.

## ProfileInterests

A small set of interests or areas of practice.

### Props

- `items` (required) — `{ id: string; title: string; description: string }[]`.

## ProfileFigure

Source-faithful profile photography: retain the supplied image's aspect ratio.

### Props

- `children` (required) — `ReactNode`.
- `caption` — `string`.

## Timeline

An ordered collection frame. No sorting or business data is owned here.

## TimelineItem

A record mount, isolated so motion can follow the shared data-motion axis.

## Example — dated records

```tsx
import { CareerRecord, RecordSection, Timeline, TimelineItem } from '@misoto22/folio/website'

<RecordSection title="Experience" count="1 role" headingId="timeline-experience">
  <Timeline><TimelineItem><CareerRecord
    title="Product designer" organization={<a href="#studio">Independent studio</a>}
    period="2023 — present" periodLabel="Period" location="Remote" locationLabel="Location" currentLabel="Current"
    description={['Designing practical tools for research and publishing.', 'Working with small teams from prototype to delivery.']}
    tags={['Research', 'Design systems']} tagsLabel="Areas of practice"
  /></TimelineItem></Timeline>
</RecordSection>
```