source/_patterns/00-atoms/07-tables/condensed-table.mustache

+{{> atoms-table(classes: "table--condensed") }}

source/_patterns/00-atoms/07-tables/striped-table.mustache

+{{> atoms-table(classes: "table--striped") }}

source/_patterns/00-atoms/07-tables/table.mustache

+<table class="table {{ classes }}">
+  <thead>
+    <tr>
+      <td>{{ headline.short }}</td>
+      <td>{{ headline.medium }}</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+    <tr>
+      <td>{{ excerpt.short }}</td>
+      <td>{{ excerpt.short }}</td>
+    </tr>
+  </tbody>
+</table>

source/_patterns/00-atoms/08-contact-lines/basic-contact-line.mustache

+<a href="mailto:example@example.com" class="icon-link contact-line {{ classes }}">
+  <i class="{{ icon }}"></i>
+  <span>{{ caption }}{{^caption}}example@example.com{{/caption}}</span>
+</a>

source/_patterns/00-atoms/08-contact-lines/responsive-contact-line.mustache

+<a href="mailto:example@example.com" class="contact-line contact-line--responsive icon-link {{ classes }}">
+  <i class="{{ icon }}"></i>
+  <span>{{ caption }}{{^caption}}example@example.com{{/caption}}</span>
+</a>

source/_patterns/00-atoms/05-cards/card-elevation-variants.mustache → source/_patterns/00-atoms/09-cards/card-elevation-variants.mustache

-<div class="flex space-x-4">
+<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
   {{> atoms-basic-card(classes: "elevation-1", description: "elevation-1") }}
   {{> atoms-basic-card(classes: "elevation-2", description: "elevation-2") }}
   {{> atoms-basic-card(classes: "elevation-3", description: "elevation-3") }}

source/_patterns/00-atoms/09-cards/hover-active-card.mustache

+<div class="card card--hoveractive {{ classes }}">
+  <div class="card__body">
+    {{ description }}
+  </div>
+</div>

source/_patterns/00-atoms/11-figure/figure-without-figcaption.mustache

+<figure class="figure">
+  <img src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
+</figure>

source/_patterns/00-atoms/11-figure/figure.mustache

+<figure class="figure">
+  <img src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
+  <figcaption>
+    {{ caption }}
+    {{^ caption }}
+      {{ excerpt.short }}
+      Autor: {{ person.first }} {{ person.last }} CC-BY-SA
+    {{/ caption}}
+  </figcaption>
+</figure>

source/_patterns/00-atoms/12-social-icons/icon-variants.mustache

+<a href="#" class="social-icon social-icon--fill social-icon--4 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-sm"></i></a>
+<a href="#" class="social-icon social-icon--fill social-icon--5 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl"></i></a>
+<a href="#" class="social-icon social-icon--fill social-icon--6 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-3xl"></i></a>

source/_patterns/00-atoms/13-flags/basic-flag.mustache

+<div class="flag {{ font }}{{^ font }}head-alt-base{{/ font }} {{ classes }}">
+  {{ cta }}
+</div>

source/_patterns/00-atoms/13-flags/flag-color-variants.mustache

+<div class="inline-flex flex-col lg:flex-row space-y-8 lg:space-y-0 lg:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-flag(classes: "bg-black text-white") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-flag(classes: "bg-green-200 text-white") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-flag(classes: "bg-blue-100 text-white") }}
+  </div>
+</div>

source/_patterns/00-atoms/13-flags/flag-size-variants.mustache

+<div class="inline-flex flex-col lg:flex-row space-y-8 lg:space-y-0 lg:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-flag(font: "head-alt-base") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-flag(font: "head-alt-lg") }}
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-basic-flag(font: "head-alt-xl") }}
+  </div>
+</div>

source/_patterns/00-atoms/14-super-buttons/super-button-color-variants.mustache

+<div class="inline-flex flex-col lg:flex-row space-y-8 lg:space-y-0 lg:space-x-8">
+  <div class="inline-flex flex-col space-y-4">
+    {{> atoms-super-button(classes: "bg-grey-125") }}
+    {{> atoms-super-button(classes: "bg-black text-white") }}
+    {{> atoms-super-button(classes: "bg-brands-facebook text-white") }}
+  </div>
+</div>