Usage

Section groups a region of a page: a settings group, a form section, or a highlighted block. It paints a background, applies padding from the spacing scale, and can draw a divider on any side.

<script setup lang="ts">
import { Section } from '@astryx-vue/core/Section'
</script>

<template>
  <Section :padding="4">
    <p>Account</p>
  </Section>
</template>

variant is section (surface), muted, or transparent. padding defaults to step 4. A single edge overrides the axis, and an axis overrides padding. dividers accepts top, bottom, start, and end; start and end follow writing direction.

The outer box uses a negative margin so a section can escape the padding of a parent container such as Card or LayoutContent.

Anatomy

Element	Description
Section container	Painted container that groups a page region.
Consumer content	Caller-provided content rendered inside the section container.

Best practices

Guidance	Practices
Do	Use Section for a region of a page. Use Card for one discrete item, such as a profile or a notification.
Do	Start with the default variant. Use muted when one region should stand out.
Do	Add a divider between adjacent sections that share a background.
Don't	Restate the theme padding with an extra margin on the children. Set padding on the section.

Examples

Default with wash

Pro Plan Everything you need to scale your team.

10 team members

Unlimited projects

Priority support

Advanced analytics

$49 / month

A default section stacked with a full-width muted section, so one region such as an upgrade prompt stands out.

With dividers

Account

Manage your profile, email, and password.

Notifications

Choose what updates you receive and how.

Privacy

Control who can see your activity and data.

Adjacent sections of the same variant, separated by a bottom divider, as on a settings page.