Content Section

The ContentSection component is ideal for detailing specific features, telling a story, or presenting complex information with an accompanying image.

Usage

import ContentSection from '~/components/sections/ContentSection.astro';
import Button from '~/components/ui/Button.astro';

<ContentSection 
  title="Our Mission" 
  image="https://example.com/image.webp"
>
  <p>We believe in open source software.</p>
  <Button>Learn More</Button>
</ContentSection>

Example

Empowering Developers

Build faster, clearer, and more robust applications with our comprehensive template suite.

• Pre-built UI components
• Optimized for performance
• Accessible by default

Get Started

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | Required | The main heading of the section. | | image | string | Required | URL of the accompanying image. | | imagePosition | 'left' \| 'right' | 'right' | Position of the image relative to the content. | | imageAlt | string | 'Section image' | Alt text for the image. | | id | string | undefined | Optional ID for deep linking. |