Hero Card

<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")
    };
}

<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" };
}

@* 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>

<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>

<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>

@* 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>

Tutorial

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>

Case Study

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>

Product Update

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>

Vision

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>

Product Update

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>

Profile variant

Olivia Rhye

Olivia Rhye

Jamie Doe

Highlight variant

Maintenance window on Saturday

Welcome to the platform

Ship with confidence

Featured variant

Quick read on our API

Building a design system that scales

The analytics dashboard, redesigned

The future of remote collaboration

Introducing analytics v2