Block

A titled content block on a product page.

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