# Portfolio

An editorial introduction, featured images, records and a question card.

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

## When to reach for it

Build a personal or studio index from supplied text, images and actions.

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

## Portfolio

An introduction and a chosen photograph, with content supplied by the host.

### Props

- `name` (required) — `string`.
- `monogram` — `string`.
- `biography` (required) — `ReactNode`.
- `facts` — `ReactNode[]` default `[]`.
- `quotation` — `ReactNode`.
- `feature` — `ReactNode`.

## PortfolioImage

### Props

- `children` (required) — `ReactElement`.
- `title` — `ReactNode`.
- `metadata` — `ReactNode`.
- `index` — `string`.
- `size` — `'feature' | 'tile' | 'thumbnail'` default `'tile'`.
- `natural` — `boolean` default `false`. Preserve the supplied image's intrinsic dimensions instead of cropping.

## PortfolioRecord

### Props

- `title` (required) — `ReactNode`.
- `description` — `ReactNode`.
- `context` — `ReactNode`.
- `image` — `ReactNode`.
- `action` — `ReactNode`.
- `metadata` — `ReactNode`.

## PortfolioList

### Props

- `children` (required) — `ReactNode`.
- `variant` — `'records' | 'frames' | 'thumbnails'` default `'records'`.
- `label` — `string`.

## PortfolioCategories

### Props

- `label` (required) — `string`.
- `items` (required) — `{ id: string; label: ReactNode; count: number }[]`.

## QuestionCard

A compact invitation to an application-owned conversation.

### Props

- `title` (required) — `ReactNode`.
- `description` (required) — `string`.
- `label` (required) — `string`.
- `placeholder` (required) — `string`.
- `value` (required) — `string`.
- `onChange` (required) — `(value: string) => void`.
- `onSubmit` (required) — `(value: string) => void`.
- `submitLabel` (required) — `string`.
- `examplesLabel` (required) — `string`.
- `examples` (required) — `string[]`.
- `disabled` — `boolean`.
- `maxLength` — `number`.
- `inputId` — `string`.

## Example — editorial introduction

```tsx
import { Text } from '@misoto22/folio'
import { Portfolio, PortfolioCategories } from '@misoto22/folio/website'

<Portfolio
  name="Avery Reed"
  monogram="AR"
  biography={<Text size="lead">Designer and writer exploring the everyday tools that help people think.</Text>}
  facts={['Independent practice', 'Working across places']}
  quotation="Start by paying attention."
  feature={<PortfolioCategories label="Selected work" items={[
    { id: 'essays', label: 'Essays', count: 12 },
    { id: 'projects', label: 'Projects', count: 4 },
  ]} />}
/>
```