Section

A Section groups related content under a header. It looks like a Card with a title, can collapse, and holds one or more SectionCard elements.

Usage#

import { Section, SectionCard } from "@clawscale/react";

<Section title="Schema" subtitle="24 columns">
  <SectionCard>{/* content */}</SectionCard>
</Section>

Examples#

Basic#

The header renders only when title is set. subtitle and icon are optional.

ingest_orders

Pipeline owned by data-platform

Schedule: Hourly at :15
Last run: Succeeded 4 min ago
Output: curated.orders_daily

core/section/basic.tsx

import { PropertyList, PropertyListItem, Section, SectionCard } from "@clawscale/react";

export default function SectionBasic() {
  return (
    <Section icon="flows" title="ingest_orders" subtitle="Pipeline owned by data-platform">
      <SectionCard>
        <PropertyList>
          <PropertyListItem label="Schedule">Hourly at :15</PropertyListItem>
          <PropertyListItem label="Last run">Succeeded 4 min ago</PropertyListItem>
          <PropertyListItem label="Output">curated.orders_daily</PropertyListItem>
        </PropertyList>
      </SectionCard>
    </Section>
  );
}

Collapsible#

collapsible makes the header toggle the content. collapseProps={{ defaultIsOpen: false }} starts the section closed.

Schema

4 columns

order_id: string
amount: decimal(12, 2)
region: string
created_at: timestamp

Run log

core/section/collapsible.tsx

import { Pre, PropertyList, PropertyListItem, Section, SectionCard } from "@clawscale/react";

export default function SectionCollapsible() {
  return (
    <>
      <Section collapsible icon="th" title="Schema" subtitle="4 columns">
        <SectionCard>
          <PropertyList>
            <PropertyListItem label="order_id">string</PropertyListItem>
            <PropertyListItem label="amount">decimal(12, 2)</PropertyListItem>
            <PropertyListItem label="region">string</PropertyListItem>
            <PropertyListItem label="created_at">timestamp</PropertyListItem>
          </PropertyList>
        </SectionCard>
      </Section>
      <Section collapsible collapseProps={{ defaultIsOpen: false }} icon="console" title="Run log">
        <SectionCard>
          <Pre>
            {"06:15:02 Started run 1284\n06:15:40 Read 1.2M rows from raw.orders\n06:17:11 Wrote curated.orders_daily"}
          </Pre>
        </SectionCard>
      </Section>
    </>
  );
}

Header actions#

rightElement renders at the end of the header. Keep it to a small button or a tag.

Alert rules

3 active

Freshness: Older than 2 h: page on-call
Row count: Drops by 20%: post to #data-alerts
Schema: Any change: email the owner

core/section/right-element.tsx

import { Button, PropertyList, PropertyListItem, Section, SectionCard } from "@clawscale/react";

export default function SectionRightElement() {
  return (
    <Section
      icon="notifications"
      title="Alert rules"
      subtitle="3 active"
      rightElement={<Button size="small" variant="minimal" icon="plus" text="Add rule" />}
    >
      <SectionCard>
        <PropertyList>
          <PropertyListItem label="Freshness">Older than 2 h: page on-call</PropertyListItem>
          <PropertyListItem label="Row count">Drops by 20%: post to #data-alerts</PropertyListItem>
          <PropertyListItem label="Schema">Any change: email the owner</PropertyListItem>
        </PropertyList>
      </SectionCard>
    </Section>
  );
}

Compact#

compact reduces the padding of the header and the cards.

Region health

us-east-1: 99.98% uptime
eu-west-1: 99.95% uptime
ap-southeast-2: 99.91% uptime

core/section/compact.tsx

import { PropertyList, PropertyListItem, Section, SectionCard } from "@clawscale/react";

export default function SectionCompact() {
  return (
    <Section compact icon="globe" title="Region health">
      <SectionCard>
        <PropertyList compact>
          <PropertyListItem label="us-east-1">99.98% uptime</PropertyListItem>
          <PropertyListItem label="eu-west-1">99.95% uptime</PropertyListItem>
          <PropertyListItem label="ap-southeast-2">99.91% uptime</PropertyListItem>
        </PropertyList>
      </SectionCard>
    </Section>
  );
}

Section cards#

Cards stack inside a section, divided by borders. padded={false} removes the padding, for tables and lists that run edge to edge.

refresh_revenue

Last 3 runs

Runs daily at 02:00 UTC. Median duration 6 min.

Run	Status	Duration	Rows
1284	Succeeded	6 min 02 s	3.4M
1283	Failed	1 min 48 s	0
1282	Succeeded	5 min 51 s	3.3M

core/section/cards.tsx

import { HTMLTable, Section, SectionCard } from "@clawscale/react";

const RUNS = [
  { id: 1284, status: "Succeeded", duration: "6 min 02 s", rows: "3.4M" },
  { id: 1283, status: "Failed", duration: "1 min 48 s", rows: "0" },
  { id: 1282, status: "Succeeded", duration: "5 min 51 s", rows: "3.3M" },
];

export default function SectionCards() {
  return (
    <Section icon="flows" title="refresh_revenue" subtitle="Last 3 runs">
      <SectionCard>Runs daily at 02:00 UTC. Median duration 6 min.</SectionCard>
      <SectionCard padded={false}>
        <HTMLTable compact style={{ width: "100%" }}>
          <thead>
            <tr>
              <th>Run</th>
              <th>Status</th>
              <th>Duration</th>
              <th>Rows</th>
            </tr>
          </thead>
          <tbody>
            {RUNS.map((run) => (
              <tr key={run.id}>
                <td>{run.id}</td>
                <td>{run.status}</td>
                <td>{run.duration}</td>
                <td>{run.rows}</td>
              </tr>
            ))}
          </tbody>
        </HTMLTable>
      </SectionCard>
    </Section>
  );
}

Props interface#

interface SectionProps extends Props, Omit<HTMLDivProps, "title">, React.RefAttributes<HTMLDivElement>@clawscale/react

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`collapseProps`	`SectionCollapseProps` Subset of props to forward to the underlying {@link Collapse } component, with the addition of a `defaultIsOpen` option which sets the default open state of the component when in uncontrolled mode.
`collapsible`	`boolean` = `false` Whether this section's contents should be collapsible.
`compact`	`boolean` = `false` Whether this section should use compact styles.
`elevation`	`SectionElevation` = `Elevation.ZERO` Visual elevation of this container element.
`icon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render in the section's header. Note that the header will only be rendered if `title` is provided.
`rightElement`	`React.JSX.Element` Element to render on the right side of the section header. Note that the header will only be rendered if `title` is provided.
`subtitle`	`React.JSX.Element \| string` Sub-title of the section. Note that the header will only be rendered if `title` is provided.
`title`	`React.JSX.Element \| string` Title of the section. Note that the header will only be rendered if `title` is provided.
`titleRenderer`	`React.FC<React.HTMLAttributes<HTMLElement>>` = `H6` Optional title renderer function. If provided, it is recommended to include a Blueprint `<H6>` element as part of the title. The render function is supplied with `className` and `id` attributes which you must forward to the DOM. The `title` prop is also passed along to this renderer via `props.children`.

interface SectionCardProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement>@clawscale/react

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`padded`	`boolean` = `true` Whether to apply visual padding inside the content container element.