Layout

Layout components help you structure your content effectively.

Section

The Section component wraps content with standardized padding and background options.

import Section from '~/components/layout/Section.astro';

<Section variant="boxed">
  <h2 class="text-2xl font-bold">Boxed Section</h2>
</Section>

Variants

Prop	Type	Default	Description
variant	'default' | 'boxed'	'default'	Controls the layout style.

Container

The Container component centers your content with a max-width.

import Container from '~/components/ui/Container.astro';

<Container>
  <p>This content is centered.</p>
</Container>

Grid

The Grid component creates a responsive grid layout.

import Grid from '~/components/ui/Grid.astro';

<Grid cols={3}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Prop	Type	Default	Description
cols	1 | 2 | 3 | 4	3	Number of columns on large screens.