Section

---
import { twMerge as tw } from 'tailwind-merge';

interface Props {
	as?: string;
	class?: string;
}

const { as = 'div', class: className } = Astro.props;
const TagName = as;
---

<TagName class={tw('container', className)}>
	<slot />
</TagName>

This component is available with our Astro Starter Kit.

Usage

Import the component on the page or component you need, like this:

---
import Container from '@components/Container.astro';
---

The Container component will place content in a centered container. It will also add padding to the left and right of the content, to make sure it doesn’t touch the edges of the screen.

You probably won’t need the Container too often, Section is often the better choice.

Props

• as - The HTML element to use for the container. Defaults to div.
• class - Optional CSS class to add to the container.