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" 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
  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:
  • none
  • 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
  • light
  • dark

backgroundColor enum | default: base

Background color for the custom section.

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

background object

Optional background still image or looping HTML5 video (self-hosted). Shared positioning applies to whichever type you choose. Video is hidden when the user prefers reduced motion.

Properties:

type enum

A cover image or a muted autoplay video.

Accepted values:
  • image
  • video

positionVertical enum

Vertical focal point (object-position for video; image position for pictures).

Accepted values:
  • top
  • center
  • bottom

positionHorizontal enum

Horizontal focal point (object-position for video; image position for pictures).

Accepted values:
  • left
  • center
  • right

priority boolean

When using a background image, load it eagerly (use for above-the-fold sections).

imageSource string

URL or path to the background image.

imageAlt string

Alt text for the background image.

videoSource string

Path to a video under public/videos. Sibling formats with the same basename are added automatically when present.

overlay string

Overlay in front of the background (-1.0 to 1.0). Negative values darken, positive values lighten.

rounded boolean | default: false

Whether to apply rounded corners to the custom section.

useDefaultEditableBinding boolean | default: true

Whether the custom section should use its default editable bindings.

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 background={{"type":"image","positionVertical":"top","positionHorizontal":"left","priority":false,"imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.3}} colorScheme="dark" paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignmentHorizontal="end" level="h3">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  colorScheme: dark
  background:
    type: image
    positionVertical: top
    positionHorizontal: left
    priority: false
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.3
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignmentHorizontal: end
      text: Build bold. Launch fast.
      level: h3
---
Dunedin cliffside

Build bold. Launch fast. 

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

<CustomSection background={{"type":"image","positionVertical":"center","positionHorizontal":"center","priority":false,"imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.3}} colorScheme="dark" paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignmentHorizontal="end" level="h3">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  colorScheme: dark
  background:
    type: image
    positionVertical: center
    positionHorizontal: center
    priority: false
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.3
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignmentHorizontal: end
      text: Build bold. Launch fast.
      level: h3
---
Dunedin cliffside

Build bold. Launch fast. 

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

<CustomSection background={{"type":"image","positionVertical":"bottom","positionHorizontal":"right","priority":false,"imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.3}} colorScheme="dark" paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignmentHorizontal="end" level="h3">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  colorScheme: dark
  background:
    type: image
    positionVertical: bottom
    positionHorizontal: right
    priority: false
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.3
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignmentHorizontal: end
      text: Build bold. Launch fast.
      level: h3
---

Background video #

Build bold. 

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

<CustomSection background={{"type":"video","positionVertical":"center","positionHorizontal":"center","videoSource":"/videos/component-docs/glass.mp4","overlay":-0.5}} colorScheme="dark" paddingHorizontal="md" paddingVertical="4xl">
  <Heading alignmentHorizontal="end">
    Build bold.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 4xl
  paddingHorizontal: md
  colorScheme: dark
  background:
    type: video
    positionVertical: center
    positionHorizontal: center
    videoSource: /videos/component-docs/glass.mp4
    overlay: -0.5
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignmentHorizontal: end
      text: Build bold.
---

Background overlay #

Dunedin cliffside

Build bold. Launch fast. 

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

<CustomSection background={{"type":"image","positionVertical":"center","positionHorizontal":"center","imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.5}} colorScheme="dark" paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignmentHorizontal="end">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  colorScheme: dark
  background:
    type: image
    positionVertical: center
    positionHorizontal: center
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.5
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignmentHorizontal: 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 background={{"type":"image","positionVertical":"center","positionHorizontal":"center","imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":0.5}} paddingHorizontal="md" paddingVertical="2xl">
  <Heading alignmentHorizontal="end">
    Build bold. Launch fast.
  </Heading>
</CustomSection>
---
blocks:
  _component: page-sections/builders/custom-section
  paddingVertical: 2xl
  paddingHorizontal: md
  background:
    type: image
    positionVertical: center
    positionHorizontal: center
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: 0.5
  contentSections:
    - _component: building-blocks/core-elements/heading
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 dark color scheme. 

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

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

This heading and Custom Section have a light color scheme. 

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

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