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.
Air Max Pro
Lightweight. Built for the road.
Trail Runner
Grip for loose ground.
City Walker
All day, on pavement.
<div class="grid gap-4 sm:grid-cols-3 w-full">
<c-lb.card border>
<c-lb.card.body>
<c-lb.card.title class="text-base">Air Max Pro</c-lb.card.title>
<p class="text-sm text-base-content/60">Lightweight. Built for the road.</p>
<c-lb.card.actions>
<c-lb.badge variant="success" size="sm">In stock</c-lb.badge>
</c-lb.card.actions>
</c-lb.card.body>
</c-lb.card>
<c-lb.card border>
<c-lb.card.body>
<c-lb.card.title class="text-base">Trail Runner</c-lb.card.title>
<p class="text-sm text-base-content/60">Grip for loose ground.</p>
<c-lb.card.actions>
<c-lb.badge variant="warning" size="sm">Low stock</c-lb.badge>
</c-lb.card.actions>
</c-lb.card.body>
</c-lb.card>
<c-lb.card border>
<c-lb.card.body>
<c-lb.card.title class="text-base">City Walker</c-lb.card.title>
<p class="text-sm text-base-content/60">All day, on pavement.</p>
<c-lb.card.actions>
<c-lb.badge variant="error" size="sm">Sold out</c-lb.badge>
</c-lb.card.actions>
</c-lb.card.body>
</c-lb.card>
</div>
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.
<div class="grid gap-4 sm:grid-cols-3">
{% for product in products %}
<c-product-card :product="product" />
{% endfor %}
</div>
A page template should expose its main regions, such as a header, filter bar, and product grid. If nested <div> tags hide those regions, extract the part with its own purpose. 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. <c-lb.button> carries the same styling and behaviour as the other buttons in the project. A hand-written <button class="..."> needs that work repeated and maintained.
Use plain HTML for structure that does not need a component, such as <section> or a table’s <thead>. Components should capture a reusable interface pattern, not replace each HTML element.
Look up names before using them
Unknown props are ignored. An invalid icon name renders no icon. Inspect the component and search the icon catalogue before you add either to a template.
labb components inspect button
labb icons search "arrow,heart"
Related
Explore blocks
