# layout.disclosure.panel

A layout.disclosure in a bordered box, for a long block of optional detail: its text.summary is a row with a chevron that turns when open, and a line under it separates the content. Pad the content yourself

Component: [`<Layout>`](https://www.prongs.dev/docs/components/layout.md) · Renders: `<details>` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md)

## Example

```tsx
<Layout intent="layout.disclosure.panel">
  <Text intent="text.summary">Show more</Text>
  …
</Layout>
```

## Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

| If it is for… | Use |
|---|---|
| A layout.disclosure in a bordered box, for a long block of optional detail: its text.summary is a row with a chevron that turns when open, and a line under it separates the content. Pad the content yourself | `layout.disclosure.panel` (this page) |
| A short answer under a question, like an FAQ | [`layout.disclosure`](https://www.prongs.dev/docs/intents/layout/disclosure.md) |

## Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

- Built from: [`layout.disclosure`](https://www.prongs.dev/docs/intents/layout/disclosure.md), [`surface.panel`](https://www.prongs.dev/docs/intents/ui.md#surface-panel)

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How layout.disclosure.panel resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`arrange.stack`](https://www.prongs.dev/docs/intents/ui.md#arrange-stack) — Children in a column, free to shrink inside a row or grid

  ```
  flex min-w-0 flex-col
  ```

- [`layout.disclosure`](https://www.prongs.dev/docs/intents/layout/disclosure.md) — Content that opens and closes in place under a text.summary line: an FAQ answer, advanced settings

  ```
  gap-2
  ```

- [`surface.panel`](https://www.prongs.dev/docs/intents/ui.md#surface-panel) — Bordered box, one level above what it sits in

  ```
  surface rounded-md border border-surface-border
  ```

- `layout.disclosure.panel` (this page) — A layout.disclosure in a bordered box, for a long block of optional detail: its text.summary is a row with a chevron that turns when open, and a line under it separates the content. Pad the content yourself

  ```
  gap-0 overflow-hidden rounded-lg [&>summary]:flex
  [&>summary]:list-none [&>summary]:items-center [&>summary]:gap-2
  [&>summary]:px-4 [&>summary]:py-3 [&>summary]:transition-colors
  [&>summary:hover]:bg-surface-hover
  [&>summary:focus-visible]:bg-surface-hover
  [&>summary:focus-visible]:outline-none
  [&>summary::-webkit-details-marker]:hidden
  [&>summary]:before:size-4 [&>summary]:before:shrink-0
  [&>summary]:before:bg-current
  [&>summary]:before:transition-transform
  [&>summary]:before:content-['']
  [&>summary]:before:[mask-position:center]
  [&>summary]:before:[mask-repeat:no-repeat]
  [&>summary]:before:[mask-size:contain]
  [&>summary]:before:[mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E)]
  [&[open]>summary]:border-b
  [&[open]>summary]:border-surface-border
  [&[open]>summary]:before:rotate-90
  motion-reduce:[&>summary]:before:transition-none
  ```

Final classes

```
flex min-w-0 flex-col surface border border-surface-border gap-0
overflow-hidden rounded-lg [&>summary]:flex
[&>summary]:list-none [&>summary]:items-center [&>summary]:gap-2
[&>summary]:px-4 [&>summary]:py-3 [&>summary]:transition-colors
[&>summary:hover]:bg-surface-hover
[&>summary:focus-visible]:bg-surface-hover
[&>summary:focus-visible]:outline-none
[&>summary::-webkit-details-marker]:hidden
[&>summary]:before:size-4 [&>summary]:before:shrink-0
[&>summary]:before:bg-current
[&>summary]:before:transition-transform
[&>summary]:before:content-['']
[&>summary]:before:[mask-position:center]
[&>summary]:before:[mask-repeat:no-repeat]
[&>summary]:before:[mask-size:contain]
[&>summary]:before:[mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E)]
[&[open]>summary]:border-b
[&[open]>summary]:border-surface-border
[&[open]>summary]:before:rotate-90
motion-reduce:[&>summary]:before:transition-none
```

Definition

```ts
'layout.disclosure.panel': {
  kind: 'semantic',
  description: 'A layout.disclosure in a bordered box, for a long block of optional detail: its text.summary is a row with a chevron that turns when open, and a line under it separates the content. Pad the content yourself',
  refs: ['layout.disclosure', 'surface.panel'],
  binding: {
    classes: 'gap-0 overflow-hidden rounded-lg [&>summary]:flex [&>summary]:list-none [&>summary]:items-center [&>summary]:gap-2 [&>summary]:px-4 [&>summary]:py-3 [&>summary]:transition-colors [&>summary:hover]:bg-surface-hover [&>summary:focus-visible]:bg-surface-hover [&>summary:focus-visible]:outline-none [&>summary::-webkit-details-marker]:hidden [&>summary]:before:size-4 [&>summary]:before:shrink-0 [&>summary]:before:bg-current [&>summary]:before:transition-transform [&>summary]:before:content-[\'\'] [&>summary]:before:[mask-position:center] [&>summary]:before:[mask-repeat:no-repeat] [&>summary]:before:[mask-size:contain] [&>summary]:before:[mask-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E)] [&[open]>summary]:border-b [&[open]>summary]:border-surface-border [&[open]>summary]:before:rotate-90 motion-reduce:[&>summary]:before:transition-none',
  },
  notFor: [
    {
      context: 'a short answer under a question, like an FAQ',
      instead: 'layout.disclosure',
    },
  ],
},
```