Basic Layout

<PrimerBrandBox Style="background-color: var(--base-color-scale-gray-2);" Padding="BrandBoxPadding.Normal">
    <PrimerBrandBento>
        <PrimerBrandBentoItem />
        <PrimerBrandBentoItem />
        <PrimerBrandBentoItem />
    </PrimerBrandBento>
</PrimerBrandBox>

Span Configuration

<PrimerBrandBox Style="background-color: var(--base-color-scale-gray-2);" Padding="BrandBoxPadding.Normal">
    <PrimerBrandBento>
        <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span12" RowSpan="BrandBentoRowSpan.Span2" />
        <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span7" RowSpan="BrandBentoRowSpan.Span2" />
        <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span5" RowSpan="BrandBentoRowSpan.Span2" />
        <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span12" RowSpan="BrandBentoRowSpan.Span2" />
    </PrimerBrandBento>
</PrimerBrandBox>

Background Subtle

<PrimerBrandBento>
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span7" RowSpan="BrandBentoRowSpan.Span2" BackgroundSubtle="true" />
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span5" RowSpan="BrandBentoRowSpan.Span2" BackgroundSubtle="true" />
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span12" RowSpan="BrandBentoRowSpan.Span2" BackgroundSubtle="true" />
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span12" RowSpan="BrandBentoRowSpan.Span2" BackgroundSubtle="true" />
</PrimerBrandBento>

Dark Mode

<PrimerBrandBento>
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span7" RowSpan="BrandBentoRowSpan.Span2" ColorMode="BrandBentoColorMode.Dark" />
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span5" RowSpan="BrandBentoRowSpan.Span2" ColorMode="BrandBentoColorMode.Dark" />
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span12" RowSpan="BrandBentoRowSpan.Span2" ColorMode="BrandBentoColorMode.Dark" />
    <PrimerBrandBentoItem ColumnSpan="BrandBentoColumnSpan.Span12" RowSpan="BrandBentoRowSpan.Span2" ColorMode="BrandBentoColorMode.Dark" />
</PrimerBrandBento>

Responsive Flow with Content & Visual

Heading

Call to action

<PrimerBrandStack>
    <PrimerBrandBox Style="background-color: var(--base-color-scale-gray-2);" Padding="BrandBoxPadding.Normal">
        <PrimerBrandBento>
            <PrimerBrandBentoItem FlowXSmall="BrandBentoFlow.Row"
                                    FlowSmall="BrandBentoFlow.Row"
                                    FlowMedium="BrandBentoFlow.Column"
                                    FlowLarge="BrandBentoFlow.Column"
                                    FlowXLarge="BrandBentoFlow.Column"
                                    FlowXXLarge="BrandBentoFlow.Column">
                <PrimerBrandBentoContent Padding="BrandBentoPadding.Normal">
                    <PrimerBrandHeading Level="BrandHeadingLevel.H5">Heading</PrimerBrandHeading>
                    <PrimerBrandLink Href="#">Call to action</PrimerBrandLink>
                </PrimerBrandBentoContent>
                <PrimerBrandBentoVisual>
                    <PrimerBrandImage Src="/images/bg-gray.png" Alt="placeholder"></PrimerBrandImage>
                </PrimerBrandBentoVisual>
            </PrimerBrandBentoItem>
        </PrimerBrandBento>
    </PrimerBrandBox>
</PrimerBrandStack>

PrimerBrandBento Options

Available parameters for the Bento container

Name	Description	Default Value	CSS Class
ChildContent	Content of the Bento container	-	-
Padding	Sets the outer padding of the Bento	Condensed	Bento--padding-{value}

PrimerBrandBentoItem Options

Available parameters for each item

Name	Description	Default Value	CSS Class
ChildContent	Content inside the item	-	-
ColumnSpan	Number of columns to span (1–12)	Span12	column-span-{n}
RowSpan	Number of rows to span (1–12)	null	row-span-{n}
ColumnStart	Column start position (1–12)	null	column-start-{n}
RowStart	Row start position (1–12)	null	row-start-{n}
BackgroundSubtle	Applies a subtle background	false	bgColor-subtle
ColorMode	Color scheme (light or dark)	null	data-color-mode
Flow	Layout direction (row or column)	Column	flow-{value}
FlowXSmall ~ FlowXXLarge	Responsive layout direction overrides	null	{breakpoint}-flow-{value}
HorizontalAlign	Align content horizontally	null	horizontalAlign-{value}
VerticalAlign	Align content vertically	null	verticalAlign-{value}

PrimerBrandBentoContent Options

Available parameters for content area

Name	Description	Default Value	CSS Class
ChildContent	Main textual content	-	-
LeadingVisual	Optional icon or element placed before the content	null	Content-icon
Padding	Inner padding	null	padding-{value}
HorizontalAlign	Horizontal alignment	Start	horizontalAlign-{value}
VerticalAlign	Vertical alignment	null	verticalAlign-{value}
HasHeading	Whether a heading is present (affects spacing)	false	heading--no-text

PrimerBrandBentoVisual Options

Available parameters for visual area

Name	Description	Default Value	CSS Class
ChildContent	Visual content (e.g., image, video)	-	-
Fill	Fill all available space	false	Visual--fill
FillMedia	Fill only if media is used	false	Visual--fill
OverflowHidden	Hide overflow content	false	overflow-hidden
OverflowInitial	Reset overflow to initial	false	overflow-initial
Padding	Inner padding	null	padding-{value}
HorizontalAlign	Horizontal alignment	null	horizontalAlign-{value}
VerticalAlign	Vertical alignment	null	verticalAlign-{value}
Position	Custom background-position (e.g., 'center')	null	style