Components

Section heading

Title a shelf or section, with a small eyebrow label above it.

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

Hero

import {
  SectionHeading,
  Eyebrow,
} from "@fungi.computer/caps/blocks/section-heading";

export default function Hero() {
  return (
    <div className="flex flex-col gap-2xs">
      <Eyebrow tone="live">Live</Eyebrow>
      <SectionHeading>Current fruiting</SectionHeading>
    </div>
  );
}

Eyebrow tones

import {
  Eyebrow,
  type EyebrowTone,
} from "@fungi.computer/caps/blocks/section-heading";

const tones: EyebrowTone[] = ["quiet", "primary", "secondary", "live"];

export default function EyebrowTones() {
  return (
    <div className="flex flex-col gap-2xs">
      {tones.map((tone) => (
        <Eyebrow key={tone} tone={tone}>
          {tone}
        </Eyebrow>
      ))}
    </div>
  );
}

Props

EyebrowProps

Prop	Type	Description
`tone?`	`"quiet" \| "primary" \| "secondary" \| "live"`

tone?"quiet" | "primary" | "secondary" | "live"

Full types: API reference.