---
title: Composition
description: "Structure labb templates as a project grows. Extract repeated interface patterns, use components with intent, and verify props and icon names."
keywords: "labb patterns, django-cotton best practices, django ui structure, labb composition, django template structure"
---
As a page grows, give repeated pieces a name and move them out of the page template. The result is easier to scan, safer to change, and simpler to reuse.
## Extract a repeated pattern
A component can contain other components. When the same chunk of markup appears more than once, turn it into a component named after the thing it represents.
This product grid contains three cards.
Writing the card three times would bury the grid’s structure in repeated markup. After extracting it, the template shows the page’s job at a glance.
```html
{% for product in products %}
{% endfor %}
```
A page template should expose its main regions, such as a header, filter bar, and product grid. If nested `
` tags hide those regions, extract the part with its own purpose. [Writing components](/docs/guide/building-uis/writing-components/) shows how to build it.
## Use the component for the job
Use a labb component when one matches the interface element you need. `` carries the same styling and behaviour as the other buttons in the project. A hand-written `