source/_patterns/00-atoms/17-alerts/alert-colors.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert-faded.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300 alert--faded", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert-semantic.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--dark", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--light", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--error", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--warning", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--success", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--info", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert.mustache

+<span class="alert {{ classes }}">
+  {{# icon }}
+    <i class="alert__icon {{ icon }}"></i>
+  {{/ icon }}
+  <span>{{ excerpt.short }}</span>
+</span>

source/_patterns/00-atoms/18-calendars/month-calendar.mustache

+<div class="__js-root">
+  <ui-month-calendar events='{{ calendarData }}'></ui-month-calendar>
+</div>

source/_patterns/00-atoms/18-calendars/year-calendar.mustache

+<div class="__js-root">
+  <ui-year-calendar events='{{ calendarData }}'></ui-year-calendar>
+</div>

source/_patterns/00-atoms/19-image/image.mustache

+<img src="https://picsum.photos/300/200" class="{{ classes }}">

source/_patterns/00-atoms/lists/unordered-list.mustache

-<ul class="unordered-list">
-  <li>{{ headline.short }}</li>
-  <li>{{ headline.short }}</li>
-  <li>{{ headline.short }}</li>
-  <li>{{ headline.short }}</li>
-  <li>{{ headline.short }}</li>
-  <li>{{ headline.short }}</li>
-</ul>

source/_patterns/01-molecules/02-cards/card-actions.mustache

+<div class="card">
+  <div class="card__body">
+    <div class="flex items-center justify-between mb-4">
+      <h1 class="card-headline">Ukončit rozpravu?</h1>
+      <button><i class="ico--cross"></i></button>
+    </div>
+    <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
+  </div>
+  <div class="card-actions space-x-1">
+    {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
+    {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+  </div>
+</div>
+
+
+<div class="card">
+  <div class="card__body">
+    <div class="flex items-center justify-between mb-4">
+      <h1 class="card-headline">Ukončit rozpravu?</h1>
+      <button><i class="ico--cross"></i></button>
+    </div>
+    <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
+  </div>
+  <div class="card-actions card-actions--right space-x-1">
+    {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
+    {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+  </div>
+</div>

source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache → source/_patterns/01-molecules/03-candidate-card/candidate-card.mustache

@@ -7,14 +7,15 @@
       </div>
       <div class="candidate-card__bio">
         <h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
-        <div class="font-light mb-4">{{ person.email }}</div>
-        <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
+        <a href="#" class="candidate-card__bio-item block mb-4">{{ person.email }}</a>
+        <h2 class="candidate-card__bio-item">{{ person.occupation }}</h2>
+        <h2 class="head-allcaps-4xs mt-4">{{ person.city }}</h2>
       </div>
       <div class="candidate-card__affiliation">
         <div>{{ person.age }} let</div>
         <div>
           {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
-          <span class="font-bold font-condensed">{{ person.party }}</span>
+          <a href="#" class="font-bold font-condensed">{{ person.party }}</a>
         </div>
       </div>
       <div class="card__body candidate-card__social">

source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache

@@ -2,7 +2,7 @@
   <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
   {{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
   <div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
-  <div class="candidate-table-row__bio head-allcaps-3xs">{{ person.age }} let, {{ person.occupation }}</div>
+  <div class="candidate-table-row__bio font-condensed">{{ person.age }} let, {{ person.occupation }}, {{ person.city }}</div>
   <div class="candidate-table-row__affiliation">
     {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
     <span class="font-bold font-condensed">{{ person.party }}</span>

source/_patterns/01-molecules/05-pagination/inline-pagination.mustache

+<nav class="pagination pagination--inline space-x-1 {{ classes }}">
+  {{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
+  {{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+  {{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+  {{> atoms-basic-button(cta: "3", classes: "btn--grey-500 btn--condensed hidden md:inline-block") }}
+  {{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+  {{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+  {{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
+</nav>

source/_patterns/01-molecules/05-pagination/next-prev-pagination.mustache

+<nav class="pagination pagination--inline space-x-1 {{ classes }}">
+  {{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
+  {{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
+</nav>

source/_patterns/01-molecules/banner/color-variants.mustache → source/_patterns/01-molecules/06-banner/color-variants.mustache

 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
   {{> molecules-banner(color: "bg-black") }}
-  {{> molecules-banner(color: "bg-violet-300") }}
-  {{> molecules-banner(color: "bg-green-200") }}
-  {{> molecules-banner(color: "bg-blue-200") }}
+  {{> molecules-banner(color: "bg-violet-500") }}
+  {{> molecules-banner(color: "bg-red-600") }}
+  {{> molecules-banner(color: "bg-blue-300") }}
   {{> molecules-banner(color: "bg-brands-facebook") }}
   {{> molecules-banner(color: "bg-brands-twitter") }}
 </div>