Skip to content


Use this as the main wrapper for your full-width sections.



Type: 'stack' | 'split' | 'spread' | 'group' = 'stack'

Applies all styles & props of the chosen Structure component to this component.

For more information, see the page for each Structure component.


Type: 'fill' | 'viewport' 'panel' = 'fill'

If set to viewport the section has a minimum height of 100vh.

If set to panel margins are added around certain child elements and backgrounds and borders are applied according to your color variables. You can use the variant prop explained below to adjust these styles.


Type: 'base' | 'ghost' | 'soft' | 'solid'


Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its children.


Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

as & HTML Attributes

Type: as?: HTMLTag = 'section'

Used to determine which HTML tag is used to render the component.

Based on the value, all HTML attributes of this tag are accepted as props too.

For a detailed explanation see Polymorphic props in the Astro documentation.