Back to site

Custom Section

Used to group and style large sections of a page.

This is a Heading inside a Custom Section. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" backgroundImage={{"source":"","alt":"","positionVertical":"top","positionHorizontal":"center"}} colorScheme="inherit" label="" maxContentWidth="2xl" paddingHorizontal="md" paddingVertical="md">
  <Heading level="h2">
    This is a Heading inside a Custom Section.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: md
  paddingVertical: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This is a Heading inside a Custom Section.
      level: h2
  label: ''
  maxContentWidth: 2xl
  colorScheme: inherit
  backgroundImage:
    source: ''
    alt: ''
    positionVertical: top
    positionHorizontal: center
  rounded: false
---

Overview

Defines the primary sections of a page and manages their appearance. Controls background, padding, and overall page width to keep layouts consistent.

Properties

label string

Optional label for the custom section to help identify it in the editor.

contentSections array | default: array

Array of content sections to render within the custom section.

maxContentWidth enum | default: 2xl

Maximum width constraint for the content.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

paddingHorizontal enum | default: md

Horizontal padding applied to the custom section content.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

paddingVertical enum | default: md

Vertical padding applied to the custom section content.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

colorScheme enum | default: inherit

Color scheme theme for the custom section.

Accepted values:
  • inherit
  • default
  • contrast

backgroundColor enum | default: base

Background color for the custom section.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight

backgroundImage object

Background image configuration for the custom section.

Properties:

source string

URL or path to the background image.

alt string

Alt text for the background image.

positionVertical enum

Vertical position of the background image.

Accepted values:
  • top
  • center
  • bottom

positionHorizontal enum

Horizontal position of the background image.

Accepted values:
  • left
  • center
  • right

rounded boolean | default: false

Whether to apply rounded corners to the custom section.

Slots

default

The contents of the Custom Section. Used only when the contentSections property is not set.

Examples

Background color

Accent background color 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="accent" paddingHorizontal="lg" paddingVertical="lg">
  <Heading level="h2">
    Accent background color
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: accent
  paddingVertical: lg
  paddingHorizontal: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Accent background color
      level: h2
---

Highlight background color 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="highlight" paddingHorizontal="lg" paddingVertical="lg">
  <Heading level="h2">
    Highlight background color
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: highlight
  paddingVertical: lg
  paddingHorizontal: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Highlight background color
      level: h2
---

Surface background color 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="lg" paddingVertical="lg">
  <Heading level="h2">
    Surface background color
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingVertical: lg
  paddingHorizontal: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Surface background color
      level: h2
---

Base background color (page background color) 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="base" paddingHorizontal="lg" paddingVertical="lg">
  <Heading level="h2">
    Base background color (page background color)
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: base
  paddingVertical: lg
  paddingHorizontal: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Base background color (page background color)
      level: h2
---

No background color (transparent) 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="base" paddingHorizontal="lg" paddingVertical="lg">
  <Heading level="h2">
    No background color (transparent)
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: base
  paddingVertical: lg
  paddingHorizontal: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: No background color (transparent)
      level: h2
---

Background image

Dunedin cliffside

Build bold. Launch fast. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundImage={{"source":"/src/assets/images/component-library/dunedin-cliff.jpg","alt":"Dunedin cliffside","positionVertical":"top","positionHorizontal":"left"}} paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignX="end">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  backgroundImage:
    source: /src/assets/images/component-library/dunedin-cliff.jpg
    alt: Dunedin cliffside
    positionVertical: top
    positionHorizontal: left
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignX: end
      text: Build bold. Launch fast.
---
Dunedin cliffside

Build bold. Launch fast. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundImage={{"source":"/src/assets/images/component-library/dunedin-cliff.jpg","alt":"Dunedin cliffside","positionVertical":"center","positionHorizontal":"center"}} paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignX="end">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  backgroundImage:
    source: /src/assets/images/component-library/dunedin-cliff.jpg
    alt: Dunedin cliffside
    positionVertical: center
    positionHorizontal: center
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignX: end
      text: Build bold. Launch fast.
---
Dunedin cliffside

Build bold. Launch fast. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundImage={{"source":"/src/assets/images/component-library/dunedin-cliff.jpg","alt":"Dunedin cliffside","positionVertical":"bottom","positionHorizontal":"right"}} paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignX="end">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  backgroundImage:
    source: /src/assets/images/component-library/dunedin-cliff.jpg
    alt: Dunedin cliffside
    positionVertical: bottom
    positionHorizontal: right
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignX: end
      text: Build bold. Launch fast.
---

Max Width

This Custom Section has xs max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" maxContentWidth="xs">
  <Heading alignX="center" level="h2">
    This Custom Section has xs max content width.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  maxContentWidth: xs
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has xs max content width.
      level: h2
      alignX: center
---

This Custom Section has sm max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" maxContentWidth="sm">
  <Heading alignX="center" level="h2">
    This Custom Section has sm max content width.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  maxContentWidth: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has sm max content width.
      level: h2
      alignX: center
---

This Custom Section has md max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" maxContentWidth="md">
  <Heading alignX="center" level="h2">
    This Custom Section has md max content width.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  maxContentWidth: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has md max content width.
      level: h2
      alignX: center
---

This Custom Section has lg max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" maxContentWidth="lg">
  <Heading alignX="center" level="h2">
    This Custom Section has lg max content width.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  maxContentWidth: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has lg max content width.
      level: h2
      alignX: center
---

This Custom Section has xl max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" maxContentWidth="xl">
  <Heading alignX="center" level="h2">
    This Custom Section has xl max content width.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  maxContentWidth: xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has xl max content width.
      level: h2
      alignX: center
---

This Custom Section has 2xl max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" maxContentWidth="2xl">
  <Heading alignX="center" level="h2">
    This Custom Section has 2xl max content width.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  maxContentWidth: 2xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has 2xl max content width.
      level: h2
      alignX: center
---

This Custom Section has 3xl max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" maxContentWidth="3xl">
  <Heading alignX="center" level="h2">
    This Custom Section has 3xl max content width.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  maxContentWidth: 3xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has 3xl max content width.
      level: h2
      alignX: center
---

Padding

This Custom Section has xs padding. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="xs" paddingVertical="xs">
  <Heading level="h2">
    This Custom Section has xs padding.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: xs
  paddingVertical: xs
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has xs padding.
      level: h2
---

This Custom Section has sm padding. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h2">
    This Custom Section has sm padding.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has sm padding.
      level: h2
---

This Custom Section has md padding. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="md" paddingVertical="md">
  <Heading level="h2">
    This Custom Section has md padding.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: md
  paddingVertical: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has md padding.
      level: h2
---

This Custom Section has lg padding. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="lg" paddingVertical="lg">
  <Heading level="h2">
    This Custom Section has lg padding.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: lg
  paddingVertical: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has lg padding.
      level: h2
---

This Custom Section has 2xl padding. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="2xl" paddingVertical="2xl">
  <Heading level="h2">
    This Custom Section has 2xl padding.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: 2xl
  paddingVertical: 2xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has 2xl padding.
      level: h2
---

This Custom Section has 3xl padding. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="3xl" paddingVertical="3xl">
  <Heading level="h2">
    This Custom Section has 3xl padding.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: 3xl
  paddingVertical: 3xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This Custom Section has 3xl padding.
      level: h2
---

Color Scheme

This heading and Custom Section have a contrasting color scheme. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" colorScheme="contrast" paddingHorizontal="md" paddingVertical="md">
  <Heading level="h2">
    This heading and Custom Section have a contrasting color scheme.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: md
  paddingVertical: md
  colorScheme: contrast
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This heading and Custom Section have a contrasting color scheme.
      level: h2
---

This heading and Custom Section have a default color scheme. 

---
import Heading from "@core-elements/heading/Heading.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="md" paddingVertical="md">
  <Heading level="h2">
    This heading and Custom Section have a default color scheme.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  paddingHorizontal: md
  paddingVertical: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This heading and Custom Section have a default color scheme.
      level: h2
---

Rounded Corners

Rounded Custom Section

This Custom Section has rounded corners applied.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="md" paddingVertical="md" rounded>
  <Heading level="h3">
    Rounded Custom Section
  </Heading>
  <Text>
    <p>This Custom Section has rounded corners applied.</p>
  </Text>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  rounded: true
  paddingHorizontal: md
  paddingVertical: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Rounded Custom Section
      level: h3
    - _component: building-blocks/core-elements/text
      text: This Custom Section has rounded corners applied.
---

Square Custom Section

This Custom Section has square corners (rounded disabled).

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import CustomSection from "@builders/custom-section/CustomSection.astro";
---

<CustomSection backgroundColor="surface" paddingHorizontal="md" paddingVertical="md">
  <Heading level="h3">
    Square Custom Section
  </Heading>
  <Text>
    <p>This Custom Section has square corners (rounded disabled).</p>
  </Text>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  backgroundColor: surface
  rounded: false
  paddingHorizontal: md
  paddingVertical: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Square Custom Section
      level: h3
    - _component: building-blocks/core-elements/text
      text: This Custom Section has square corners (rounded disabled).
---