BrandUI Breakout Banner

Basic Breakout Banner

Where the most ambitious teams build great things

<PrimerBrandBreakoutBanner>
    <PrimerBrandBreakoutBannerHeading>Where the most ambitious teams build great things</PrimerBrandBreakoutBannerHeading>
    <PrimerBrandBreakoutBannerLinkGroup>
        <PrimerBrandLink Href="#">Primary action</PrimerBrandLink>
    </PrimerBrandBreakoutBannerLinkGroup>
</PrimerBrandBreakoutBanner>

With Description

Where the most ambitious teams build great things

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

Primary action

<PrimerBrandBreakoutBanner>
    <PrimerBrandBreakoutBannerHeading>Where the most ambitious teams build great things</PrimerBrandBreakoutBannerHeading>
    <PrimerBrandBreakoutBannerDescription>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
    </PrimerBrandBreakoutBannerDescription>
    <PrimerBrandBreakoutBannerLinkGroup>
        <PrimerBrandLink Href="#">Primary action</PrimerBrandLink>
    </PrimerBrandBreakoutBannerLinkGroup>
</PrimerBrandBreakoutBanner>

Multiple Actions

Where the most ambitious teams build great things

Primary action Secondary action

<PrimerBrandBreakoutBanner>
    <PrimerBrandBreakoutBannerHeading>Where the most ambitious teams build great things</PrimerBrandBreakoutBannerHeading>
    <PrimerBrandBreakoutBannerLinkGroup>
        <PrimerBrandLink Href="#">Primary action</PrimerBrandLink>
        <PrimerBrandLink Href="#" ArrowDirection="BrandLinkArrowDirection.None">Secondary action</PrimerBrandLink>
    </PrimerBrandBreakoutBannerLinkGroup>
</PrimerBrandBreakoutBanner>

Vertical Actions

Where the most ambitious teams build great things

Primary action Secondary action

<PrimerBrandBreakoutBanner>
    <PrimerBrandBreakoutBannerHeading>Where the most ambitious teams build great things</PrimerBrandBreakoutBannerHeading>
    <PrimerBrandBreakoutBannerLinkGroup Direction="BrandDirection.Vertical">
        <PrimerBrandLink Href="#">Primary action</PrimerBrandLink>
        <PrimerBrandLink Href="#">Secondary action</PrimerBrandLink>
    </PrimerBrandBreakoutBannerLinkGroup>
</PrimerBrandBreakoutBanner>

Center Aligned

Where the most ambitious teams build great things

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

Primary action Secondary action

<PrimerBrandBreakoutBanner Align="BrandBreakoutBannerAlign.Center">
    <PrimerBrandBreakoutBannerHeading>Where the most ambitious teams build great things</PrimerBrandBreakoutBannerHeading>
    <PrimerBrandBreakoutBannerDescription>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
    </PrimerBrandBreakoutBannerDescription>
    <PrimerBrandBreakoutBannerLinkGroup>
        <PrimerBrandLink Href="#">Primary action</PrimerBrandLink>
        <PrimerBrandLink Href="#">Secondary action</PrimerBrandLink>
    </PrimerBrandBreakoutBannerLinkGroup>
</PrimerBrandBreakoutBanner>

With Background Image

Where the most ambitious teams build great things

Primary action

<PrimerBrandBreakoutBanner BackgroundImageNarrow="/images/placeholder.png"
                            BackgroundImageRegular="/images/placeholder.png"
                            BackgroundImageWide="/images/placeholder.png"
                            ColorMode="BrandBreakoutBannerColorMode.Dark">
    <PrimerBrandBreakoutBannerHeading>Where the most ambitious teams build great things</PrimerBrandBreakoutBannerHeading>
    <PrimerBrandBreakoutBannerLinkGroup>
        <PrimerBrandLink Href="#">Primary action</PrimerBrandLink>
    </PrimerBrandBreakoutBannerLinkGroup>
</PrimerBrandBreakoutBanner>

With Background Color

Where the most ambitious teams build great things

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

Primary action Secondary action

<PrimerBrandBreakoutBanner BackgroundColor="var(--base-color-scale-blue-0)">
    <PrimerBrandBreakoutBannerHeading>Where the most ambitious teams build great things</PrimerBrandBreakoutBannerHeading>
    <PrimerBrandBreakoutBannerDescription>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
    </PrimerBrandBreakoutBannerDescription>
    <PrimerBrandBreakoutBannerLinkGroup>
        <PrimerBrandLink Href="#">Primary action</PrimerBrandLink>
        <PrimerBrandLink Href="#">Secondary action</PrimerBrandLink>
    </PrimerBrandBreakoutBannerLinkGroup>
</PrimerBrandBreakoutBanner>

PrimerBrandBreakoutBanner Options

Parameters for the container

Name	Description	Default Value	CSS Class
ChildContent	Main content inside the banner	-	-
Align	Aligns content horizontally	Start	BreakoutBanner-content--center
BackgroundColor	Custom background color	null	BreakoutBanner--background
BackgroundImageNarrow	Background image for narrow layout	null	style
BackgroundImageRegular	Background image for regular layout	null	style
BackgroundImageWide	Background image for wide layout	null	style
ColorMode	Theme: light or dark	null	data-color-mode

BreakoutBannerLinkGroup Options

Parameters for link group

Name	Description	Default Value	CSS Class
ChildContent	List of links to render	-	-
Direction	Stack direction (horizontal or vertical)	Horizontal	Stack--{direction}
Gap	Spacing between links	Spacious	gap-{value}
DirectionMap	Responsive direction per breakpoint	auto	Stack-[breakpoint]--direction
GapMap	Responsive gap per breakpoint	auto	Stack-[breakpoint]--gap