Children

Children are props with a familiar name, not a separate syntax feature. PropsWithChildren<T> adds a children field to a component's own props type; callers provide the child fragment explicitly, just like any other prop.

type CardProps = PropsWithChildren<{ title: string }>;

export const Card = ({ title, children }: CardProps) => html`
    <section>
        <h2>${title}</h2>
        ${children}
    </section>
`;

Your task

card.ts renders title but drops children entirely — main.ts passes a paragraph in, but nothing shows up below the heading. Destructure children and interpolate it into the template.

Reveal solution

import { html, type PropsWithChildren } from '@grainular/nord';

type CardProps = PropsWithChildren<{ title: string }>;

export const Card = ({ title, children }: CardProps) => html`
    <section class="box">
        <h2>${title}</h2>
        ${children}
    </section>
`;

Move on to grains for the state that actually changes over time.