Basic Hero

Label

This is my super sweet hero heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.

<PrimerBrandHero Heading="This is my super sweet hero heading"
                    Description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id."
                    Label="Label">
    <Actions>
        <PrimerBrandButton Variant="BrandButtonVariant.Primary">Primary action</PrimerBrandButton>
        <PrimerBrandButton Variant="BrandButtonVariant.Secondary">Secondary action</PrimerBrandButton>
    </Actions>
</PrimerBrandHero>

With Image

Actions

Automate your workflow from idea to production

Actions

Automate your workflow from idea to production

<PrimerBrandHero Heading="Automate your workflow from idea to production"
                    Label="Actions"
                    ImageSrc="/images/bg-gray.png"
                    ImageAlt="">
    <Actions>
        <PrimerBrandButton Variant="BrandButtonVariant.Primary">Get started with Actions</PrimerBrandButton>
    </Actions>
</PrimerBrandHero>

<PrimerBrandHero Heading="Automate your workflow from idea to production"
                    Label="Actions"
                    ImageSrc="/images/bg-gray.png"
                    ImageAlt=""
                    ContentSpanMap="@(new() { { BrandBreakpoint.Medium, BrandGridColumnSpan.Span6 } })"
                    ImageSpanMap="@(new() { { BrandBreakpoint.Medium, BrandGridColumnSpan.Span6 } })">
    <Actions>
        <PrimerBrandButton Variant="BrandButtonVariant.Primary">Get started with Actions</PrimerBrandButton>
    </Actions>
</PrimerBrandHero>

Center Aligned

Label

Blazing fast cloud developer environments

<PrimerBrandHero Heading="Blazing fast cloud developer environments"
                    Align="BrandHeroAlign.Center"
                    Label="Label">
    <Actions>
        <PrimerButton Variant="ButtonVariant.Primary">Primary action</PrimerButton>
    </Actions>
</PrimerBrandHero>

Hero Component Options

Available options for PrimerBrandHero

NameDescriptionDefault ValueCSS Class
Label
Optional label above heading
null
Hero__label
Heading
Main heading text
null
Hero__heading
Description
Optional descriptive text
null
Hero__description
Align
Content alignment
Start
Hero--align-*
Actions
Primary/secondary CTA buttons
null
Hero__actions
ImageSrc
Image source URL
null
Hero__image
ImageAlt
Alternative text for image
null
-
ContentSpanMap
Grid column span for content
{ Medium: 12 }
Grid__column--*-span-*
ImageSpanMap
Grid column span for image
{ Medium: 12 }
Grid__column--*-span-*