Hero Card
Top-of-page banner with three variants: Profile (identity header with avatar, stats, tags, and socials), Highlight (brand-gradient announcement with leading icon), and Featured (content spotlight with edge-to-edge media in split, overlay, or top layouts). Three sizes (sm / md / lg) and full dark-mode + responsive support.
Profile variant
Identity header with avatar, cover image, stats, tags, and socials. Available in sm / md / lg sizes.
Profile, small size
Olivia Rhye
Product Designer at Untitled UI
<HeroCard Variant="HeroVariant.Profile"
Size="HeroSize.Sm"
BackgroundImageSrc="/images/cover.jpg"
BackgroundImageAlt="Profile cover"
AvatarSrc="/images/avatar.jpg"
AvatarAlt="Olivia Rhye"
AvatarInitials="OR"
Title="Olivia Rhye"
Subtitle="Product Designer at Untitled UI"
Stats="@oliviaStats">
<Actions>
<Button Variant="primary" Size="sm" Text="Follow" />
<Button Variant="secondary" Size="sm" Text="Message" />
</Actions>
</HeroCard>
@code {
private List<HeroStat> oliviaStats = new()
{
new("Projects", "12"),
new("Followers", "2.4k"),
new("Joined", "2023")
};
}Profile, medium size, with stats and tags
Olivia Rhye
Product Designer at Untitled UI
Passionate about building delightful interfaces and championing design systems across teams.
<HeroCard Variant="HeroVariant.Profile"
Size="HeroSize.Md"
BackgroundImageSrc="/images/cover.jpg"
BackgroundImageAlt="Profile cover"
AvatarSrc="/images/avatar.jpg"
AvatarAlt="Olivia Rhye"
AvatarInitials="OR"
Title="Olivia Rhye"
Subtitle="Product Designer at Untitled UI"
Description="Passionate about building delightful interfaces and championing design systems across teams."
Stats="@oliviaStats"
Tags="@oliviaTags">
<Actions>
<Button Variant="primary" Size="md" Text="Follow" />
<Button Variant="secondary" Size="md" Text="Message" />
</Actions>
</HeroCard>
@code {
private List<HeroStat> oliviaStats = new()
{
new("Projects", "12"),
new("Followers", "2.4k"),
new("Joined", "2023")
};
private List<string> oliviaTags = new() { "Design Systems", "Figma", "Blazor" };
}Profile, large size, without cover image (solid background fallback)
Jamie Doe
Engineering Manager
Leading the platform team through our next generation of developer tooling.
@* No BackgroundImageSrc → solid background fallback *@
<HeroCard Variant="HeroVariant.Profile"
Size="HeroSize.Lg"
AvatarInitials="JD"
Title="Jamie Doe"
Subtitle="Engineering Manager"
Description="Leading the platform team through our next generation of developer tooling."
Stats="@jamieStats">
<Actions>
<Button Variant="primary" Size="md" Text="View profile" />
</Actions>
</HeroCard>Highlight variant
Brand-gradient announcement with optional leading icon and dismiss button. Available in sm / md / lg sizes.
Highlight, small size, text-only (no leading icon)
Maintenance window on Saturday
We'll be upgrading our database between 02:00 and 04:00 UTC.
<HeroCard Variant="HeroVariant.Highlight"
Size="HeroSize.Sm"
Title="Maintenance window on Saturday"
Description="We'll be upgrading our database between 02:00 and 04:00 UTC.">
<Eyebrow>Heads up</Eyebrow>
<LeadingIcon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" />
</svg>
</LeadingIcon>
</HeroCard>Highlight, medium size, default brand gradient with leading icon, dismissible
Welcome to the platform
Everything you need to design, ship, and scale beautiful interfaces - in one place.
<HeroCard Variant="HeroVariant.Highlight"
Size="HeroSize.Md"
Title="Welcome to the platform"
Description="Everything you need to design, ship, and scale beautiful interfaces - in one place."
Dismissible="true">
<Eyebrow>New Release</Eyebrow>
<LeadingIcon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" />
</svg>
</LeadingIcon>
<Actions>
<Button Variant="secondary" Size="md" Text="Get started" />
<Button Variant="tertiary" Size="md" Text="Learn more" />
</Actions>
</HeroCard>Highlight, large size, custom gradient (slate)
Ship with confidence
Our new CI pipeline catches issues before they reach production.
@* Override the brand gradient with custom from/to stops *@
<HeroCard Variant="HeroVariant.Highlight"
Size="HeroSize.Lg"
GradientFrom="#0f172a"
GradientTo="#334155"
Title="Ship with confidence"
Description="Our new CI pipeline catches issues before they reach production.">
<Eyebrow>Engineering</Eyebrow>
<Actions>
<Button Variant="primary" Size="md" Text="Read the announcement" />
</Actions>
</HeroCard>Featured variant
Content spotlight with edge-to-edge media in three layouts (split, overlay, top). Available in sm / md / lg sizes.
Featured, small size, split layout
Quick read on our API
A 5-minute tour of the new endpoints.
<HeroCard Variant="HeroVariant.Featured"
Size="HeroSize.Sm"
MediaLayout="HeroMediaLayout.Split"
MediaPosition="HeroMediaPosition.Right"
BackgroundImageSrc="/images/tutorial.jpg"
BackgroundImageAlt="Laptop on desk"
Title="Quick read on our API"
Description="A 5-minute tour of the new endpoints.">
<Eyebrow>Tutorial</Eyebrow>
<Actions>
<Button Variant="primary" Size="sm" Text="Start tutorial" />
</Actions>
</HeroCard>Featured, medium size, split layout, media on right
Building a design system that scales
How we organized 200+ components into a coherent library used by 40 teams.
<HeroCard Variant="HeroVariant.Featured"
Size="HeroSize.Md"
MediaLayout="HeroMediaLayout.Split"
MediaPosition="HeroMediaPosition.Right"
BackgroundImageSrc="/images/case-study.jpg"
BackgroundImageAlt="Laptop on desk"
Title="Building a design system that scales"
Description="How we organized 200+ components into a coherent library used by 40 teams.">
<Eyebrow>Case Study</Eyebrow>
<Actions>
<Button Variant="primary" Size="md" Text="Read case study" />
</Actions>
</HeroCard>Featured, medium size, split layout, media on left
The analytics dashboard, redesigned
Faster queries, richer filters, and custom dashboards in a single surface.
<HeroCard Variant="HeroVariant.Featured"
Size="HeroSize.Md"
MediaLayout="HeroMediaLayout.Split"
MediaPosition="HeroMediaPosition.Left"
BackgroundImageSrc="/images/dashboard.jpg"
BackgroundImageAlt="Dashboard mockup"
Title="The analytics dashboard, redesigned"
Description="Faster queries, richer filters, and custom dashboards in a single surface.">
<Eyebrow>Product Update</Eyebrow>
<Actions>
<Button Variant="primary" Size="md" Text="See what's new" />
<Button Variant="tertiary" Size="md" Text="Changelog" />
</Actions>
</HeroCard>Featured, large size, overlay layout (text on image with scrim)
The future of remote collaboration
Our vision for the next decade of distributed product teams.
@* Overlay places text over the image with a dark scrim for legibility *@
<HeroCard Variant="HeroVariant.Featured"
Size="HeroSize.Lg"
MediaLayout="HeroMediaLayout.Overlay"
BackgroundImageSrc="/images/hero-vision.jpg"
BackgroundImageAlt="Earth from space at night"
Title="The future of remote collaboration"
Description="Our vision for the next decade of distributed product teams.">
<Eyebrow>Vision</Eyebrow>
<Actions>
<Button Variant="primary" Size="md" Text="Read more" />
</Actions>
</HeroCard>Featured, medium size, top layout (image above content)
Introducing analytics v2
Faster queries, richer filters, and custom dashboards - all in one place.
<HeroCard Variant="HeroVariant.Featured"
Size="HeroSize.Md"
MediaLayout="HeroMediaLayout.Top"
BackgroundImageSrc="/images/dashboard.jpg"
BackgroundImageAlt="Dashboard mockup"
Title="Introducing analytics v2"
Description="Faster queries, richer filters, and custom dashboards - all in one place.">
<Eyebrow>Product Update</Eyebrow>
<Actions>
<Button Variant="primary" Size="md" Text="See what's new" />
<Button Variant="tertiary" Size="md" Text="Changelog" />
</Actions>
</HeroCard>