source/_patterns/00-atoms/16-tooltips/tooltip.mustache

+<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>

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/00-badge/basic-badge.mustache

@@ -12,7 +12,7 @@
     {{^ hideOccupation }}
       <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
     {{/ hideOccupation}}
-    {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
-    {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
   </div>
 </div>

source/_patterns/01-molecules/00-badge/condensed-badge.mustache

@@ -12,7 +12,7 @@
     {{^ hideOccupation }}
       <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
     {{/ hideOccupation }}
-    {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
-    {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
   </div>
 </div>

source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache

 <div class="social-icon-group space-x-2 {{ classes }}">
-  {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
-  {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
-  {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
-  {{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
-  {{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
+  {{> atoms-basic-social-icon(icon: "ico--twitter") }}
+  {{> atoms-basic-social-icon(icon: "ico--feed") }}
+  {{> atoms-basic-social-icon(icon: "ico--youtube") }}
+  {{> atoms-basic-social-icon(icon: "ico--instagram") }}
+  {{> atoms-basic-social-icon(icon: "ico--flickr") }}
+  {{> atoms-basic-social-icon(icon: "ico--envelope") }}
 </div>

source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache

 <div class="social-icon-group space-x-0/5 {{ classes }}">
-  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "fab fa-facebook") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "fab fa-twitter") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "fab fa-linkedin") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "ico--facebook") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "ico--twitter") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "ico--linkedin") }}
 </div>

source/_patterns/01-molecules/01-social-icon-group/small-colored-social-icon-group.mustache

 <div class="social-icon-group {{ classes }}">
-  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white text-sm social-icon--4", icon: "fab fa-facebook") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white text-sm social-icon--4", icon: "fab fa-twitter") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white text-sm social-icon--4", icon: "fab fa-linkedin") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white text-sm social-icon--4", icon: "ico--facebook") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white text-sm social-icon--4", icon: "ico--twitter") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white text-sm social-icon--4", icon: "ico--linkedin") }}
 </div>

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/cards/image-card.mustache → source/_patterns/01-molecules/02-cards/image-card.mustache

 <div class="card {{ classes }}">
   <a href="#">
-    <img class="w-full" src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
+    <img class="w-full {{ imgClasses }}" src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
   </a>
   <div class="card__body {{ bodyClasses }}">
     <h1 class="card-headline mb-2"><a href="#">{{ title }}{{^ title }}{{ headline.short }}{{/ title }}</a></h1>

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>