Skip to content

Section

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

Props

structure

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.

frame

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.

variant

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

size

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

Sets the size for this component and all its children.

theme

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.