Compose components and blocks

GoalLink to this section

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 namesLink to this section

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 spacingLink to this section

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 rhythmLink to this section

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 intentionallyLink to this section

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, Card, Columns and Themes and backgrounds for their exact APIs.

Check your workLink to this section

• 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.