Compound Components

A compound component is a parent made up of several coordinated sub-parts that are used together as a family, like a card with its own header and body. Cotton lets you build one by grouping the parts in a folder: add an index.html to make the folder itself usable as the default component, then address the siblings with dot notation. This also keeps your project structure tidy and cuts repetition in the template.

templates/
├── cotton/
│   ├── card/
│   │   ├── index.html
│   │   ├── header.html

<c-card>
    <c-card.header>...</c-card.header>
</c-card>

{% cotton card %}
    {% cotton card.header %}...{% endcotton %}
{% endcotton %}

Here <c-card> resolves to cotton/card/index.html, while <c-card.header> resolves to cotton/card/header.html, with no extra index segment needed in the tag.