I've always loved the Pseudo-Patterns feature of Pattern Lab - which is the ability to have a component of card.twig
and then to demo several variants by passing in different data by having files named card~a.json
, card~b.json
, and card~c.json
. This would show each of them as an item in Pattern Lab. It's awesome!
Except for two complaints I have: you can't include the card with the data from those json files in something else (like a grid of cards as an Organism), and you can only use text for the data since it's json or yaml (typing out Lorem Ipsum gets old). Here's how I work around both of those.
card.twig
<div class="card">
<h3 class="card__title">{{ title }}</h3>
<div class="card__body">
{{ body }}
</div>
</div>
card-a.twig
{% include "card.twig" with {
title: headline.short,
body: excerpt.medium,
} only %}
something-else.twig
{% include "card-a.twig" %}
This allows the data to follow down the chain of includes all the way to the cleverly-named something-else.twig
. Additionally, in card-a.twig
, I use excerpt.medium
with is declared in the global data at _data/data.json
, and contains a medium amount of Lorem ipsum characters for my prototyping pleasure. I hope this helps; happy Pattern Labbing!