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.


<div class="card">
  <h3 class="card__title">{{ title }}</h3>
  <div class="card__body">
    {{ body }}


{% include "card.twig" with {
  title: headline.short,
  body: excerpt.medium,
} only %}


{% 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!