BrandUI Stack - PrimerBlazor

Basic Stack

Box 1

Box 2

Box 3

<PrimerBrandStack DirectionMap="@(new() { { BrandStackBreakpoint.Regular, BrandStackDirection.Vertical } })"
                    GapMap="@(new() { { BrandStackBreakpoint.Regular, BrandStackGap.Gap16 } })"
                    PaddingMap="@(new() { { BrandStackBreakpoint.Regular, BrandStackPadding.Padding24 } })"
                    AlignItemsMap="@(new() { { BrandStackBreakpoint.Regular, BrandStackAlignItems.Center } })"
                    JustifyContentMap="@(new() { { BrandStackBreakpoint.Regular, BrandStackJustifyContent.Center } })"
                    WrapMap="@(new() { { BrandStackBreakpoint.Regular, BrandStackWrap.Wrap } })">
    <PrimerBrandBox BorderColor="BrandBoxBorderColor.Muted" BorderWidth="BrandBoxBorderWidth.Thin" BorderStyle="BrandBoxBorderStyle.Solid" Padding="BrandBoxPadding.Padding12">
        Box 1
    </PrimerBrandBox>
    <PrimerBrandBox BorderColor="BrandBoxBorderColor.Muted" BorderWidth="BrandBoxBorderWidth.Thin" BorderStyle="BrandBoxBorderStyle.Solid" Padding="BrandBoxPadding.Padding12">
        Box 2
    </PrimerBrandBox>
    <PrimerBrandBox BorderColor="BrandBoxBorderColor.Muted" BorderWidth="BrandBoxBorderWidth.Thin" BorderStyle="BrandBoxBorderStyle.Solid" Padding="BrandBoxPadding.Padding12">
        Box 3
    </PrimerBrandBox>
</PrimerBrandStack>

PrimerBrandStack Options

Available options for PrimerBrandStack component

Name	Description	Default Value	CSS Class
DirectionMap	Direction per breakpoint (horizontal or vertical)	{}	Stack-[breakpoint]--horizontal\|vertical
GapMap	Gap between items per breakpoint	{}	Stack-[breakpoint]--gap-{value}
PaddingMap	Padding around stack per breakpoint	{}	Stack-[breakpoint]--padding-{value}
AlignItemsMap	Align items vertically (start, center, end)	{}	Stack-[breakpoint]--align-items-{value}
JustifyContentMap	Align items horizontally (start, center, space-between, etc.)	{}	Stack-[breakpoint]--justify-content-{value}
WrapMap	Wrap or nowrap per breakpoint	{}	Stack-[breakpoint]-flexWrap--wrap\|nowrap
ChildContent	Content inside the stack	-	-
Style	Inline CSS styles	""	-
ClassName	Custom CSS classes	""	-
DesktopOnly	Render only on desktop	false	show-on-desktop hide-on-mobile
MobileOnly	Render only on mobile	false	show-on-mobile hide-on-desktop