Section

---
import { twMerge as tw } from 'tailwind-merge';
import Container from '@components/Container.astro';

interface Props {
	as?: string;
	class?: string;
	innerClass?: string;
	backgroundImage?: string;
	contain?: boolean;
	collapse?: boolean;
	collapseBottom?: boolean;
	collapseTop?: boolean;
}

const {
	as = 'section',
	class: className,
	innerClass: innerClassName,
	backgroundImage,
	contain = true,
	collapse,
	collapseBottom,
	collapseTop,
} = Astro.props;

const TagName = as;
const InnerTagName = contain ? Container : 'div';
---

<TagName
	class:list={tw(backgroundImage && 'bg-cover bg-center', className)}
	style={backgroundImage && `background-image: url('${backgroundImage}')`}
>
	<div
		class={tw([
			!collapse &&
				!collapseBottom &&
				!collapseTop &&
				'py-12 sm:py-20 md:py-24 lg:py-32',
			collapseBottom && 'pt-12 sm:pt-20 md:pt-24 lg:pt-32',
			collapseTop && 'pb-12 sm:pb-20 md:pb-24 lg:pb-32',
			innerClassName,
		])}
	>
		<InnerTagName>
			<slot />
		</InnerTagName>
	</div>
</TagName>

This component is available with our Astro Starter Kit.

Usage

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

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

The Section component makes laying out full width content consistent and easy. If you’ve used the Section Block from our WordPress Starter Kit, you’ll be familiar with how this works.

Spacing

By default, the Section component adds spacing above and below your content. Sometimes though, you want to stack Sections with the same background colour and this can lead to unwanted spacing. To remove the spacing, you can use the collapse props, like this:

<Section collapse>This section has no vertical spacing.</Section>
<Section collapseTop>This section has no top spacing.</Section>
<Section collapseBottom>This section has no bottom spacing.</Section>

Content Container

Usually you want the content inside your Section to be aligned with the Container. If you don’t want this however, you can pass container={false} to the Section component, like this:

<Section contain={false}></Section>

Background Image

You can add a background image to your Section by passing the backgroundImage prop, like this:

<Section backgroundImage="/images/bg.jpg"></Section>

By default, object-position: center and object-fit: cover will be applied to the image, but you can override these options by setting a class on the Section. For example, if you want the image to be aligned to the top, you can do this:

<Section class="object-top"></Section>

See the TailwindCSS documentation on Object Fit and Object Position for more classes.

Styling the inner element

You shouldn’t need to do this very often, but in the cases where you need to style the inner element of the Section, you can pass a class to the Section component, using the innerClass prop, like this:

<Section innerClass="bg-red-500"></Section>