Website
Portfolio
An editorial introduction, featured images, records and a question card.
Usage
When to reach for it
Build a personal or studio index from supplied text, images and actions.
Ships from@misoto22/folio/website
import { Portfolio } from '@misoto22/folio/website'Notes
An introduction and a chosen photograph, with content supplied by the host.
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
editorial introduction
A short biography and a supporting index share one introductory composition. Text, facts and category totals are supplied by the application.
Designer and writer exploring the everyday tools that help people think.
Independent practice
Working across places
Start by paying attention.
Selected work
- Essays
- 12
- Projects
- 4
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
PortfolioImage
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactElement | — | |
| index | string | — | |
| metadata | ReactNode | — | |
| natural | boolean | false | Preserve the supplied image's intrinsic dimensions instead of cropping. |
| size | 'feature' | 'tile' | 'thumbnail' | 'tile' | — |
| title | ReactNode | — |
PortfolioRecord
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | ReactNode | — | |
| action | ReactNode | — | |
| context | ReactNode | — | |
| description | ReactNode | — | |
| image | ReactNode | — | |
| metadata | ReactNode | — |
PortfolioList
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| label | string | — | |
| variant | 'records' | 'frames' | 'thumbnails' | 'records' | — |
PortfolioCategories
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | { id: string; label: ReactNode; count: number }[] | — | |
| labelrequired | string | — |
QuestionCard
A compact invitation to an application-owned conversation.
| Prop | Type | Default | Description |
|---|---|---|---|
| descriptionrequired | string | — | |
| examplesrequired | string[] | — | |
| examplesLabelrequired | string | — | |
| labelrequired | string | — | |
| onChangerequired | (value: string) => void | — | |
| onSubmitrequired | (value: string) => void | — | |
| placeholderrequired | string | — | |
| submitLabelrequired | string | — | |
| titlerequired | ReactNode | — | |
| valuerequired | string | — | |
| disabled | boolean | — | |
| inputId | string | — | |
| maxLength | number | — |