ProductUI Box - PrimerBlazor

Basic Box

This is the box body content.

This is the box footer.

<PrimerBox>
    <PrimerBoxHeader>Basic Box</PrimerBoxHeader>
    <PrimerBoxBody>This is the box body content.</PrimerBoxBody>
    <PrimerBoxFooter>This is the box footer.</PrimerBoxFooter>
</PrimerBox>

Blue Condensed Box

Blue Condensed

Condensed content inside the box.

<PrimerBox Variant="BoxVariant.Blue" Density="BoxDensity.Condensed">
    <PrimerBoxHeader>Blue Condensed</PrimerBoxHeader>
    <PrimerBoxBody>Condensed content inside the box.</PrimerBoxBody>
</PrimerBox>

Box Row

First row

Unread item

Custom colored row

<PrimerBox Variant="BoxVariant.Default" Density="BoxDensity.Condensed">
    <PrimerBoxRow>First row</PrimerBoxRow>
    <PrimerBoxRow IsUnread="true" HoverColor="blue">Unread item</PrimerBoxRow>
    <PrimerBoxRow CustomColorClass="Box-row--gray">Custom colored row</PrimerBoxRow>
</PrimerBox>

Overlay Box

Wide Overlay

Option A

<PrimerBox IsOverlay="true" OverlayWidth="BoxOverlayWidth.Wide" Variant="BoxVariant.Blue" Density="BoxDensity.Condensed">
    <PrimerBoxHeader>Wide Overlay</PrimerBoxHeader>
    <PrimerBoxRow>Option A</PrimerBoxRow>
    <PrimerBoxRow IsFocused="true">Option B (Focused)</PrimerBoxRow>
    <PrimerBoxFooter>Close</PrimerBoxFooter>
</PrimerBox>

Box Options

Available options for PrimerBox component

Name	Description	Default Value	CSS Class
Variant	Box color variant	Default	Box--blue, Box--danger
Density	Padding density	Default	Box--condensed, Box--spacious
IsOverlay	Whether box uses overlay style	false	Box--overlay
OverlayWidth	Width of overlay box	Default	Box-overlay--narrow, Box-overlay--wide
ClassName	Custom CSS classes	null	-
Style	Inline styles	null	-

BoxRow Options

Available options for PrimerBoxRow component

Name	Description	Default Value	CSS Class
IsUnread	Mark row as unread	false	Box-row--unread
IsFocused	Mark row as focused	false	navigation-focus
HoverColor	Hover color	null	Box-row--hover-blue, Box-row--hover-gray
CustomColorClass	Custom color class	null	-

BoxSection Options

Available options for PrimerBoxHeader, PrimerBoxBody, PrimerBoxFooter

Name	Description	Default Value	CSS Class
ClassName	Custom CSS classes	null	-
ChildContent	Section inner content	-	-