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>
<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>
<PrimerBrandHero Heading="Blazing fast cloud developer environments"
Align="BrandHeroAlign.Center"
Label="Label">
<Actions>
<PrimerButton Variant="ButtonVariant.Primary">Primary action</PrimerButton>
</Actions>
</PrimerBrandHero>
Available options for PrimerBrandHero
Name | Description | Default Value | CSS 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-* |