Website

Collection

Collection headings, search controls, featured records and empty states.

Usage

When to reach for it

Display a searchable archive without moving filtering or data access into the package.

Ships from@misoto22/design/website

TSX

import { ContentBand } from '@misoto22/design/website'

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

searchable records

Search and category state stay with the host, which supplies the filtered records. The controls provide named inputs, clear actions and pressed filter states.

Library

Essays and projects from the studio.

A practice of attention

Noticing what a familiar place reveals.

projects

The shared library

A small tool for a growing collection.

Parts

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

CollectionIntro

CollectionIntro props
Prop	Type	Default	Description
titlerequired	`ReactNode`		—
actions	`ReactNode`		—
compact	`boolean`	`false`	—
context	`ReactNode`		—
description	`ReactNode`		—
media	`ReactNode`		—

CollectionMetadata

CollectionMetadata props
Prop	Type	Default	Description
itemsrequired	`CollectionMetadataItem[]`		—

CollectionGroup

CollectionGroup props
Prop	Type	Description
caption	`ReactNode`	—
compact	`boolean`	—
headingId	`string`	—
title	`ReactNode`	—

Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.

CollectionSearch

CollectionSearch props
Prop	Type	Default	Description
clearLabelrequired	`string`		—
labelrequired	`string`		—
onChangerequired	`(value: string) => void`		—
valuerequired	`string`		—
focusShortcut	`boolean`	`false`	—
placeholder	`string`		—

CollectionControls

CollectionControls props
Prop	Type	Default	Description
itemsrequired	`CollectionFilter[]`		—
onSelectrequired	`(value: string \| null) => void`		—
selectedrequired	`string \| null`		—
filterLabel	`string`		—
quiet	`boolean`		—
search	`CollectionSearchProps`		—
showCounts	`boolean`	`true`	—

HighlightedText

HighlightedText props
Prop	Type	Description
queryrequired	`string`	—
textrequired	`string`	—
className	`string`	—

RecordRow

RecordRow props
Prop	Type	Default	Description
titlerequired	`ReactNode`		—
context	`ReactNode`		—
headingLevel	`2 \| 3`	`2`	—
index	`ReactNode`		—
link	`CollectionLink`		—
media	`ReactNode`		—
metadata	`ReactNode`		—
subtitle	`ReactNode`		—
summary	`ReactNode`		—
trailing	`ReactNode`		—
variant	`'editorial' \| 'media' \| 'compact'`	`'editorial'`	—

FeaturedRecord

FeaturedRecord props
Prop	Type	Description
mediarequired	`ReactNode`	—
titlerequired	`ReactNode`	—
action	`ReactNode`	—
context	`ReactNode`	—
summary	`ReactNode`	—

CollectionEmpty

CollectionEmpty props
Prop	Type	Description
messagerequired	`string`	—
action	`ReactNode`	—
hint	`string`	—

CollectionFooter

CollectionFooter props
Prop	Type	Default	Description
children	`ReactNode`		—
feedback	`ReactNode`		—

TaxonomyLinks

TaxonomyLinks props
Prop	Type	Default	Description
childrenrequired	`ReactNode`		—
label	`string`		—

ReferenceLink

A quiet resource link for references, separate from action buttons.

Takes no props of its own.

ReferenceRows

ReferenceRows props
Prop	Type	Default	Description
itemsrequired	`{ id?: string; label: ReactNode; hint?: ReactNode; content: ReactNode }[]`		—

CollectionTally

CollectionTally props
Prop	Type	Default	Description
childrenrequired	`ReactNode`		—

CollectionList

CollectionList props
Prop	Type	Default	Description
childrenrequired	`ReactNode`		—

Also accepts everything in HTMLAttributes<HTMLUListElement>. Those are forwarded to the underlying element and are not listed row by row.

Types

TSX

export type CollectionLink = ReactElement<{ children?: ReactNode }>