Partial Component

Disclosure

The Disclosure partial renders a list of collapsed blocks with the nativedetails/summaryelements: accessible, keyboard-operable, and JS-free. Each block's body is markdown. It is the lightweight primitive for folding secondary content, such as policies or fine print, into another section's text column.

It is named for the spec term:detailsandsummarytogether form a "disclosure widget". For a standalone FAQ-style page section with animated one-open-at-a-time behavior, use the accordion section instead; the two complement each other.

The expand/collapse animates in browsers that support::details-contentwithinterpolate-size. Everywhere else the blocks simply snap open, so the animation is a progressive enhancement.

Manifest

json

{
  "name": "disclosure",
  "type": "partial",
  "styles": ["disclosure.css"],
  "scripts": [],
  "requires": []
}

Configuration

yaml

disclosures:
  - title: 'Accessibility'
    prose: 'The studio is wheelchair accessible. Contact us about other accommodations.'
  - title: 'Cancellation policy'
    prose: 'Full refund up to 7 days before the first session.'

Configuration Options

Property	Type	Required	Default	Description
`title`	string	Yes	-	The always-visible summary line
`prose`	string	Yes	-	Markdown body shown when the block is expanded

Example

Below, the disclosure partial is used through the multi-media section: an optionaldisclosuresarray renders beneath the text column's prose and CTAs. A typical use is a registration embed beside class information, with organization boilerplate folded away underneath:

What to expect

A hands-on workshop for all skill levels. Materials are provided, and you will take your finished piece home at the end of the session.

Accessibility

The studio is wheelchair accessible. Contact us ahead of time about other accommodations, we are happy to help.

Cancellation policy

Full refund up to 7 days before the first session. Within 7 days, we offer credit toward a future class.

What to bring

Just yourself. Closed-toe shoes are recommended for shop classes.

Notes

Purely declarative: no JavaScript is loaded for this partial
The browser's find-in-page can search inside closed blocks in browsers that supporthidden="until-found"semantics fordetails
Use it for secondary content; primary content should not be hidden behind a click
For a standalone section with animated exclusive-open behavior, use the accordion section