Section Component

The Section component in Craft Design System is designed to create distinct content areas within your page layout. It provides consistent vertical spacing and can be used to organize your content into logical groups.

Import

import { Section } from "@/components/craft";

Usage

Wrap your content with the Section component:

<Section>
  <h2>My Section Title</h2>
  <p>This is the content of my section...</p>
</Section>

Props

The Section component accepts the following props:

  • children: React.ReactNode (required)
  • className: string (optional)
  • id: string (optional)

Features

Consistent Spacing

Provides uniform vertical padding for content separation.

Responsive Design

Adjusts spacing for different screen sizes.

Semantic Structure

Uses the <section> tag for proper document outline.

Customizable

Easily extendable with additional classes or styles.

Customization

You can customize the Section component by passing additional classes through the className prop:

<Section className="bg-gray-100 rounded-lg shadow-md">
  {/* Your section content */}
</Section>

Default Styles

The Section component applies the following default styles:

  • Vertical padding: py-8 on small screens, py-12 on medium screens and above
  • Full width of its container

Example

Here's an example of how to use the Section component with other Craft components:

import { Main, Section, Container } from "@/components/craft";

export default function HomePage() {
  return (
    <Main>
      <Section>
        <Container>
          <h1 className="text-3xl font-bold mb-4">Welcome to Our Website</h1>
          <p>We provide top-notch services for all your needs.</p>
        </Container>
      </Section>
      <Section className="bg-gray-100">
        <Container>
          <h2 className="text-2xl font-semibold mb-4">Our Services</h2>
          <ul className="list-disc list-inside">
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
          </ul>
        </Container>
      </Section>
    </Main>
  );
}

This setup creates two distinct sections on the page, each with its own content and styling.

Best Practices

  1. Use the Section component to group related content together.
  2. Combine with the Container component to control the width of your content within the section.
  3. Use the className prop to add background colors, borders, or other visual separators between sections.
  4. Consider using the id prop for anchor links or for more specific styling.
  5. Nest Section components within the Main component for a complete page structure.

The Section component in Craft Design System helps you create well-structured, visually distinct content areas that improve the overall organization and readability of your pages.