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/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>

source/_patterns/00-atoms/14-super-buttons/super-button-hover-effects.mustache

+{{> atoms-super-button(classes: "bg-grey-125 hover:bg-black hover:text-white") }}

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

+<a href="#" class="super-button {{ classes }}">
+  <span class="super-button__body">{{ cta }}</span>
+  <i class="super-button__icon {{ icon }}"></i>
+</a>

source/_patterns/00-atoms/15-form-fields/01-text-input.mustache

+<input type="text" class="text-input form-field__control {{ classes }}" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }} />

source/_patterns/00-atoms/15-form-fields/02-disabled-text-input.mustache

+{{> atoms-text-input(disabled: true) }}

source/_patterns/00-atoms/15-form-fields/03-read-only-text-input.mustache

+{{> atoms-text-input(readonly: true) }}

source/_patterns/00-atoms/15-form-fields/04-text-input-addon.mustache

+<div class="text-input-addon {{ classes }}"><i class="ico--pirati"></i></div>