Skip to main content

Hero()

Hero(__namedParameters): Element

A versatile hero component that displays an icon alongside primary and secondary content. Automatically organizes child components by type and supports both stacked and grid layouts.

Parameters​

__namedParameters​

HeroProps

Returns​

Element

Example​

// Basic hero with icon and content
<Hero>
  <Icon><Placeholder /></Icon>
  <HeroTitle>Primary Title</HeroTitle>
  <HeroSubtitle>Secondary information</HeroSubtitle>
</Hero>

// Grid layout for compact display
<Hero compact>
  <Icon><Settings /></Icon>
  <HeroTitle>Settings</HeroTitle>
  <HeroSubtitle>Configure your preferences</HeroSubtitle>
</Hero>

Child Component Behavior​

  • Icon: Only one allowed
  • HeroTitle: Only one allowed
  • HeroSubtitle: Any number allowed as secondary content

Layout Modes​

  • Stack (default): Vertical layout with larger icon and stacked content
  • Grid (compact=true): Horizontal layout with smaller icon beside content