---
title: Block
description: A titled content block on a product page.
---

```tsx
import { Block, Button } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function BlockBasic() {
  return (
    <Preview block={true}>
      <Block.Root>
        <Block.Header>
          <Block.Title>Title</Block.Title>
          <Block.Meta>12</Block.Meta>
          <Block.Actions>
            <Button.Root size="xs" variant="ghost">
              Action
            </Button.Root>
          </Block.Actions>
        </Block.Header>
        Content
      </Block.Root>
    </Preview>
  );
}
```

- A block heads one piece of page content: a chart, a table, a stack trace, a trace tree. Use [Section](/deft/components/section) for forms and settings.
- The title is a semibold `h2` at body text size. The header has no side inset, so the title lines up with the content edge.
- Meta follows the title, for example a count or a summary; actions go to the right.
- Stack blocks with spacing or dividers from the page; the block itself has no border or background.

## API

Parts: `Root`, `Header`, `Title`, `Meta`, `Actions`. Props go to the native element: `section` for `Root`, `h2` for `Title`, `span` for `Meta`, `div` for the rest.