---
title: "Compose components and blocks"
description: "Build page sections with Systhema components, named variants and token-driven themes."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/guides/build-a-site/components-and-blocks
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


## Goal

Compose Northline's service section with shipped components. In the CMS, use the equivalent native blocks so the client can reorder and edit it.

## 1. Read the project's available names

```bash
cat .systhema/references/tokens/_index.toon
```

Confirm the themes, layout backgrounds and component variants in the collection references. This example uses shipped defaults: themes `default` and `dark`, backgrounds `main` and `alternative`, card variant `default` and button variant `primary`.

## 2. Compose without adding prose spacing

```tsx title="src/components/ServicesSection.tsx"
import {
  Section,
  Heading,
  Paragraph,
  Columns,
  Column,
  Card,
  Button,
  ButtonTitle,
} from '@systhemaui/next'

export function ServicesSection() {
  return (
    <Section theme="default" layoutBackground="alternative">
      <Heading.h2>Plan a better workplace</Heading.h2>
      <Paragraph type="lead">Practical support from the first brief to move-in.</Paragraph>
      <Columns columns={3}>
        <Column>
          <Card.div variant="default">
            <Heading.h3>Workplace planning</Heading.h3>
            <Paragraph>Agree on the spaces your team needs.</Paragraph>
          </Card.div>
        </Column>
        <Column>
          <Card.div variant="default">
            <Heading.h3>Interior coordination</Heading.h3>
            <Paragraph>Coordinate the layout, finishes and installation.</Paragraph>
          </Card.div>
        </Column>
        <Column>
          <Card.div variant="default">
            <Heading.h3>Move planning</Heading.h3>
            <Paragraph>Prepare the team for its new space.</Paragraph>
          </Card.div>
        </Column>
      </Columns>
      <Paragraph>
        <Button.a href="/contact" variant="primary">
          <ButtonTitle>Discuss your project</ButtonTitle>
        </Button.a>
      </Paragraph>
    </Section>
  )
}
```

Render this inside a code-owned page's Article. In the default CMS page, create the same structure with a Section containing a Columns block and Cards. Do not hardcode copy into a component when the client needs to edit it.

## 3. Let the container own rhythm

Section, Column and Card are rich-text containers. Direct headings and paragraphs already receive token-derived spacing. Avoid wrapping prose in a vertical Stack or adding `space-y-*`, margins or padding to its children.

Use Stack for a row of buttons, chips or cards. Put a single inline action inside a Paragraph, as above. `Section padding={3}` changes the horizontal grid inset; it is not vertical spacing.

## 4. Switch a region's palette intentionally

Set `theme` to change semantic colors and `layoutBackground` to choose the region's ground. A section can use `theme="dark" layoutBackground="main"` when the design calls for a dark band.

Use named variants such as `primary`, `secondary`, `default` and `highlighted`, after checking that they exist in the project. Do not use numeric variant positions.

Follow [Button](https://docs.systhema.app/ar/next/components/button.md), [Card](https://docs.systhema.app/ar/next/components/card.md), [Columns](https://docs.systhema.app/ar/next/components/columns.md) and [Themes and backgrounds](https://docs.systhema.app/ar/next/concepts/themes.md) for their exact APIs.

## Check your work

- The section aligns with adjacent page content at each breakpoint.
- Cards do not have an extra padded wrapper.
- Text and actions inherit the selected theme.
- CMS-authored sections render without a second Section container.
- The enquiry action is reachable by keyboard.

Next: [Build a custom block](custom-block.md).