Section card

TS

import { … } from "@fungi.computer/caps/blocks/section-card";

Hero

TSX

import { SectionCard } from "@fungi.computer/caps/blocks/section-card";
import { Button } from "@fungi.computer/caps/components/button";

export default function Hero() {
  return (
    <SectionCard
      className="w-full max-w-sm"
      heading="This week's harvest"
      description="Logged across 3 beds."
      actions={
        <Button size="xs" variant="ghost">
          Export
        </Button>
      }
    >
      <p className="text-sm">4.1 kg total, up from 3.6 kg last week.</p>
    </SectionCard>
  );
}

Span full

TSX

import { SectionGrid } from "@fungi.computer/caps/blocks/launcher-grid";
import { SectionCard } from "@fungi.computer/caps/blocks/section-card";

export default function SpanFull() {
  return (
    <SectionGrid className="w-full max-w-md">
      <SectionCard span="full" heading="Overview">
        <p className="text-sm">Spans both columns.</p>
      </SectionCard>
      <SectionCard heading="Beds">3 active.</SectionCard>
      <SectionCard heading="Dryer">1 batch.</SectionCard>
    </SectionGrid>
  );
}

Props

SectionCardProps

Prop	Type	Description
heading	ReactNode	The host-provided section heading.
description?	ReactNode	Optional host-provided supporting copy.
actions?	ReactNode	Optional host-provided controls or status content.
children?	ReactNode	The section body, supplied by the host through normal composition.
span?	"auto" | "full"	Inside a SectionGrid, full spans every column; auto takes one.
headingLevel?	2 | 3	Heading level; the host keeps its document outline. Defaults to 3.

• headingReactNode

  The host-provided section heading.

• description?ReactNode

  Optional host-provided supporting copy.

• actions?ReactNode

  Optional host-provided controls or status content.

• children?ReactNode

  The section body, supplied by the host through normal composition.

• span?"auto" | "full"

  Inside a SectionGrid, full spans every column; auto takes one.

• headingLevel?2 | 3

  Heading level; the host keeps its document outline. Defaults to 3.

Full types: API reference.