SectionHeader

SectionHeader gives repeated sections a consistent title, description, and action rhythm below a PageHeader.

#Default usage

<SectionHeader
  actions={<Button variant="secondary">Configure</Button>}
  description="Visible package state and operational signals."
  eyebrow="Health"
  title="Package status"
/>

#Import

import { Button, SectionHeader } from "@froggdesign/enter-ui-react";

#Variants

#Marketing hierarchy

Use variant="marketing" alongside a hero for larger, balanced section titles. The component owns responsive type sizing and the spacing between its slots.

<SectionHeader
  variant="marketing"
  eyebrow="Less friction. More focus."
  title="Good work starts with a clear workspace."
  description="Keep the next step obvious and the right people informed."
/>

#Accessibility

SectionHeader renders a header and uses h2 for title. Keep heading levels in document order.

#API

• title, description, eyebrow, and actions define the standard slots.
• variant: default or marketing.
• children render inside the content column.
• Supports native header props and className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.