Section Component

Basic Section

The simplest way to use a Section, used to divide different content areas of a page

Default section content

 <Section>
<p>Default section content</p>
</Section> 

Sections with Different Backgrounds

Set the section’s background style using the background property, supporting transparent, white, gray, primary, secondary, and dark

Section with gray background

 <Section background="gray">
<p>Section with gray background</p>
</Section> 

Custom Padding

Adjust the section’s padding size using the padding property, supporting none, sm, md, lg, and xl

Section with large padding

 <Section padding="lg">
<p>Section with large padding</p>
</Section> 

Centered Content Section

Set the centered property to true to center the section’s content

Centered Title

Centered content

 <Section centered={true}>
<h3>Centered Title</h3>
<p>Centered content</p>
</Section> 

Section Without Container

Set the container property to false to not wrap content with the internal Container component

Content not wrapped with a container will take up the full section width

 <Section container={false} background="primary">
<p>Content not wrapped with a container will take up the full section width</p>
</Section> 

Custom Container Size

Set the internal container size using the containerSize property, only effective when container is true

Section with small size container

 <Section containerSize="sm" background="secondary">
<p>Section with small size container</p>
</Section> 

Dark Background Section

Use the dark background to create a dark section, text automatically changes to white

Dark Section

Text in dark background sections automatically changes to white

 <Section background="dark">
<h3>Dark Section</h3>
<p>Text in dark background sections automatically changes to white</p>
</Section> 

Complete Example

Demonstrates multiple properties of the Section component used together

Featured Section

Using theme color background, extra large padding, centered content display, and large size container

 <Section 
background="primary" 
padding="xl" 
centered={true}
containerSize="lg"
class="my-custom-class"
>
<div class="py-8">
  <h2 class="text-2xl font-bold mb-4">Featured Section</h2>
  <p>Using theme color background, extra large padding, centered content display, and large size container</p>
</div>
</Section> 