# layout.panel

A self-contained box about one thing: a sign-in box, a profile summary. Its border is quieter than a layout.teaser’s, since it does not open anything

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

## Example

```tsx
<Layout intent="layout.panel">
  …
</Layout>
```

## Choosing between neighbours

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

| If it is for… | Use |
|---|---|
| A self-contained box about one thing: a sign-in box, a profile summary. Its border is quieter than a layout.teaser’s, since it does not open anything | `layout.panel` (this page) |
| A box in a collection that opens a page as a whole | [`layout.teaser`](https://www.prongs.dev/docs/intents/layout/teaser.md) |
| A box of rows read like a table | [`layout.index`](https://www.prongs.dev/docs/intents/layout/index.md) |
| A home page section pairing a pitch with a live demo | [`layout.feature`](https://www.prongs.dev/docs/intents/layout/feature.md) |
| A live example with its code underneath | [`layout.preview`](https://www.prongs.dev/docs/intents/layout/preview.md) |
| A live example with its code under it (rather than [`layout.listing`](https://www.prongs.dev/docs/intents/layout/listing.md)) | `layout.panel` (this page) |
| A standalone box that is not in a list (rather than [`layout.item`](https://www.prongs.dev/docs/intents/layout/item.md)) | `layout.panel` (this page) |
| A box that does not open anything (rather than [`layout.teaser`](https://www.prongs.dev/docs/intents/layout/teaser.md)) | `layout.panel` (this page) |
| A box of related content (rather than [`layout.window`](https://www.prongs.dev/docs/intents/layout/window.md)) | `layout.panel` (this page) |
| A framed block inside the page width (rather than [`layout.band`](https://www.prongs.dev/docs/intents/layout/band.md)) | `layout.panel` (this page) |
| A box around content (rather than [`layout.marker`](https://www.prongs.dev/docs/intents/layout/marker.md)) | `layout.panel` (this page) |
| Content that is always there (rather than [`layout.notice`](https://www.prongs.dev/docs/intents/layout/notice.md)) | `layout.panel` (this page) |

## 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: [`surface.panel`](https://www.prongs.dev/docs/intents/ui.md#surface-panel), [`arrange.stack`](https://www.prongs.dev/docs/intents/ui.md#arrange-stack)
- Used to build: [`layout.feature`](https://www.prongs.dev/docs/intents/layout/feature.md), [`layout.feature.demo`](https://www.prongs.dev/docs/intents/layout/feature-demo.md), [`layout.preview`](https://www.prongs.dev/docs/intents/layout/preview.md), [`layout.index`](https://www.prongs.dev/docs/intents/layout/index.md)

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

- [`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
  ```

- [`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.panel` (this page) — A self-contained box about one thing: a sign-in box, a profile summary. Its border is quieter than a layout.teaser’s, since it does not open anything

  ```
  gap-3 p-[clamp(1rem,4vw,1.5rem)] border-surface-border/60
  ```

Final classes

```
surface rounded-md border flex min-w-0 flex-col gap-3
p-[clamp(1rem,4vw,1.5rem)] border-surface-border/60
```

Definition

```ts
'layout.panel': {
  kind: 'semantic',
  description: 'A self-contained box about one thing: a sign-in box, a profile summary. Its border is quieter than a layout.teaser’s, since it does not open anything',
  refs: ['surface.panel', 'arrange.stack'],
  binding: { classes: 'gap-3 p-[clamp(1rem,4vw,1.5rem)] border-surface-border/60' },
  notFor: [
    {
      context: 'a box in a collection that opens a page as a whole',
      instead: 'layout.teaser',
    },
    { context: 'a box of rows read like a table', instead: 'layout.index' },
    {
      context: 'a home page section pairing a pitch with a live demo',
      instead: 'layout.feature',
    },
    {
      context: 'a live example with its code underneath',
      instead: 'layout.preview',
    },
  ],
},
```