Content Section

Structured content sections with images, text, and lists

npm run add ContentSection

Use the ContentSection component to create structured content sections that can include images, text blocks, lists with icons, and multi-column layouts. This is particularly useful for building rich content pages with a consistent design.

Preview

Why Astro?

Astro is a modern web framework focused on shipping less JavaScript. It renders pages to static HTML by default and only hydrates interactive components.

Only ship JavaScript when required.
Use React,, Svelte, or plain HTML together.

Great DX

Astro feels familiar if you know HTML, CSS, and JavaScript. Its component syntax is simple, explicit, and easy to reason about.

Clean separation of frontmatter and template.
Isolate interactivity for maximum performance.

Content-first by design

Astro shines when building content-heavy sites like blogs, documentation, marketing pages, and landing pages. Markdown, MDX, and CMS integrations are first-class citizens.

Write content naturally.
Type-safe content schemas built directly into Astro.
Fast pages, clean HTML, and predictable metadata.

Performance

Astro pages load fast because they ship minimal JavaScript and prioritize static rendering.

Flexibility

Mix multiple UI frameworks in a single project without lock-in or architectural complexity.

Scalability

Astro works just as well for small sites as it does for large, multi-page platforms.

Unlock code

---
import { circleCheck } from 'webcoreui/icons'

const sections = [
    {
        type: 'img',
        src: '/img/astro.png',
        alt: 'Astro islands architecture illustration',
        width: 500,
        height: 200
    },
    {
        type: 'columns',
        items: [
            [
                {
                    type: 'text',
                    title: 'Why Astro?',
                    text: 'Astro is a modern web framework...'
                },
                {
                    type: 'list',
                    color: 'var(--w-color-success)',
                    items: [
                        {
                            icon: circleCheck,
                            text: 'Only ship JavaScript when required.'
                        },
                        {
                            icon: circleCheck,
                            text: 'Use React,, Svelte, or plain HTML together.'
                        }
                    ]
                }
            ],
            [
                {
                    type: 'text',
                    title: 'Great DX',
                    text: 'Astro feels familiar if you know HTML, CSS, and JavaScript.'
                },
                {
                    type: 'list',
                    color: 'var(--w-color-success)',
                    items: [
                        {
                            icon: circleCheck,
                            text: 'Clean separation of frontmatter and template.'
                        },
                        {
                            icon: circleCheck,
                            text: 'Isolate interactivity for maximum performance.'
                        }
                    ]
                }
            ]
        ]
    }
]
---

<ContentSection items={sections} />

The ContentSection component accepts an array of content sections through the items prop. Each section can be of type:

img: Renders an image with specified src, alt, width, and height. You can also enable lazy loading by setting the lazy property to true.
text: Renders a text block with an optional title. Supports HTML content in the text. The title tag can be customized using the titleTag prop on the main component. By default it uses a strong tag.
list: Renders a list with icons. For details on the list type, please refer to the List with Icons documentation.
columns: When using the columns type, you can create multi-column layouts by passing an array of arrays. The number of items passed to the array will determine the number of columns. Columns can only contain the other section types (img, text, list).

You can pass these types in any combination and order to create rich content layouts.

API

Unlock code

type ContentImageSection = {
    src: string
    alt: string
    width: number
    height: number
    lazy?: boolean
}

type ContentTextSection = {
    title?: string
    text: string
}

type ContentListSection = IconListProps

type ContentColumnSection = {
    items: Exclude<ContentSection, { type: 'columns' }>[][]
}

type ContentSection =
    | ({ type: 'img' } & ContentImageSection)
    | ({ type: 'text' } & ContentTextSection)
    | ({ type: 'list' } & ContentListSection)
    | ({ type: 'columns' } & ContentColumnSection)

type ContentSectionProps = {
    items: ContentSection[]
    titleTag?: string
    className?: string
}

For the list type, please refer to the List with Icons documentation

Prop	Default	Purpose
`items`	`[]`	Pass an array of content sections to display.
`titleTag`	`strong`	Sets the HTML tag to use for section titles.
`className`	`-`	Pass additional CSS classes for the component.

Image type	Purpose
`src`	Sets the image source URL.
`alt`	Sets the alt text for the image.
`width`	Sets the width of the image.
`height`	Sets the height of the image.
`lazy`	Set to `true` to enable lazy loading for the image.

Text type	Purpose
`title`	Sets the title for the text section.
`text`	Sets the main text content for the section. Supports HTML content.

Columns type	Purpose
`items`	Pass an array of arrays, where each inner array represents a column containing content sections.