KPISection

KPISection is the product header pattern over a row of MetricCard items. Pair with StatGrid for the body.

#Default usage

<KPISection
  actions={<Button size="sm">Export</Button>}
  description="Last 7 days"
  title="Activity"
>
  <StatGrid columns={3}>
    <MetricCard label="Active" value="128" />
    <MetricCard label="Pending" value="42" />
    <MetricCard label="Failed" value="3" />
  </StatGrid>
</KPISection>

#Import

import { KPISection } from "@froggdesign/enter-ui-react";

#Accessibility

KPISection renders as <section> with an <h2> title. Avoid stacking multiple KPISections without distinct headings — they share the page heading scale.

#API

• title, description: heading slots.
• period: optional period selector or filter.
• actions: trailing actions.

#Styling

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