This is a basic section with default padding and no background.
<PrimerBrandSection>
<PrimerBrandSectionIntro Title="Default section"
Description="This is a basic section with default padding and no background." />
</PrimerBrandSection>This section has a custom padding at the top and bottom.
<PrimerBrandSection PaddingBlockStart="SectionPadding.None"
PaddingBlockEnd="SectionPadding.Spacious">
<PrimerBrandSectionIntro Title="Custom paddings"
Description="This section has a custom padding at the top and bottom."
Align="SectionIntroAlign.Center" />
</PrimerBrandSection>This section has a predefined background color.
<PrimerBrandSection BackgroundColor="SectionBackgroundColor.Subtle">
<PrimerBrandSectionIntro Title="Predefined background"
Description="This section has a predefined background color." />
</PrimerBrandSection>Fully customizable with background, padding, and layout.
<PrimerBrandSection BackgroundColor="SectionBackgroundColor.Subtle"
BackgroundImages="@(new() { "https://github.com/user-attachments/assets/068634a3-926d-49b8-b949-0b1e2a204651" })"
BackgroundImagePosition="SectionBackgroundImagePosition.BottomCenter"
BackgroundImageSize="SectionBackgroundImageSize.Cover"
PaddingBlockStart="SectionPadding.Spacious"
PaddingBlockEnd="SectionPadding.Spacious"
ClassName="custom-section"
Style="min-height: 400px;">
<PrimerBrandSectionIntro Title="Custom Themed Section"
Description="Fully customizable with background, padding, and layout." />
</PrimerBrandSection><PrimerBrandSection BackgroundColor="SectionBackgroundColor.Default"
BackgroundImages="@(new() {
"https://github.com/user-attachments/assets/a7340dea-2076-42da-87a9-057f953beb83",
"https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708"
})"
BackgroundImagePosition="SectionBackgroundImagePosition.Custom"
CustomBackgroundImagePosition="bottom -1px center,center"
BackgroundImageSize="SectionBackgroundImageSize.Custom"
CustomBackgroundImageSize="auto,cover"
PaddingBlockStart="SectionPadding.Spacious"
PaddingBlockEnd="SectionPadding.Spacious">
<PrimerBrandSectionIntro Title="Multiple background images"
Align="SectionIntroAlign.Center" />
</PrimerBrandSection>Available parameters for PrimerBrandSection
| Name | Description | Default Value | CSS Class |
|---|---|---|---|
PaddingBlockStart | Top padding of section | Normal | Section--paddingBlockStart-{value} |
PaddingBlockEnd | Bottom padding of section | Normal | Section--paddingBlockEnd-{value} |
BackgroundColor | Background color (Default/Subtle/Custom) | Default | --brand-Section-background-color |
BackgroundImages | Background image list | null | --brand-Section-background-image-src |
BackgroundImagePosition | Image position preset or custom | Center | --brand-Section-background-image-position |
CustomBackgroundImagePosition | Custom image position | null | --brand-Section-background-image-position |
BackgroundImageSize | Image size preset or custom | Cover | --brand-Section-background-image-size |
CustomBackgroundImageSize | Custom image size | null | --brand-Section-background-image-size |
ClassName | Custom CSS class | null | - |
Style | Inline style | null | - |
ChildContent | Section content | - | - |
Available parameters for PrimerBrandSectionIntro
| Name | Description | Default Value | CSS Class |
|---|---|---|---|
Title | Main heading | null | SectionIntro__heading |
Description | Description text | null | SectionIntro__description |
Label | Optional top label | null | SectionIntro__label |
LinkLabel | CTA label | null | SectionIntro__link |
LinkHref | CTA href | null | SectionIntro__link |
Align | Align start/center | Start | SectionIntro--align-center |