> For the complete documentation index, see [llms.txt](https://developers.getstage.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.getstage.app/design-system/block.md).

# Block

The wrapper element for a extension, creates a block with spacing.

The `Block` component is the wrapper element for a extension. It creates a block with spacing. Use this component to create a dedicated space for your extension. Each extension can only have one `Block` component.

## API Reference

### Props

| Name                                       | Type                                                                                                                                                                                   | Default | Description                              |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------- |
| children<mark style="color:red;">\*</mark> | `React.ReactElement<ListProps \| ButtonProps \| CardsProps \| PillsProps \| HeaderProps> \| React.ReactElement<ListProps \| ButtonProps \| CardsProps \| PillsProps \| HeaderProps>[]` |         | The content of the block.                |
| size<mark style="color:red;">\*</mark>     | `1 \| 2 \| 3`                                                                                                                                                                          |         | The initial size of the block.           |
| actions                                    | `ActionsProps`                                                                                                                                                                         |         | The actions for the block.               |
| imagePath                                  | `string`                                                                                                                                                                               |         | The image of the block.                  |
| title                                      | `string`                                                                                                                                                                               |         | The title of the block.                  |
| isEditable                                 | `boolean`                                                                                                                                                                              |         | Whether the block is editable.           |
| handleTitleChange                          | `(title: string) => void`                                                                                                                                                              |         | The callback for when the title changes. |
| handleSizeChange                           | `(size: number) => void`                                                                                                                                                               |         | The callback for when the size changes.  |

## Examples

### Basic with List

```tsx
import { Block, List } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      actions={link: { url="https://getstage.app" }}
      size={2}
    >
      <List>
        <List.Item type="text" title="Item 1" subtitle="This is a subtitle" />
        <List.Item type="text" title="Item 2" subtitle="This is a subtitle" />
        <List.Item type="text" title="Item 3" subtitle="This is a subtitle" />
      </List>
    </Block>
  );
}
```

### With title and Cards

```tsx
import { Section, Cards } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block
      title="Title"
      imagePath="https://source.unsplash.com/random/400x200"
      actions={link: { url="https://getstage.app" }}
      size={1}
    >
      <Cards>
        <Cards.Item title="Item 1" />
        <Cards.Item title="Item 2" />
        <Cards.Item title="Item 3" />
      </Cards>
    </Block>
  );
}
```