source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache

+<div class="btn btn--icon {{ classes }}">
+  <div class="btn__body-wrap">
+    <button class="btn__body {{ bodyClasses }}">{{ cta }}</button>
+    <button class="btn__icon dropdown-button">
+      <i class="ico--chevron-down"></i>
+      <ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
+        <li class="dropdown-button__choice hover:bg-grey-125">
+          <a class="block px-4 py-3" href="#">Navrhnout postup</a>
+        </li>
+      </ul>
+    </button>
+  </div>
+</div>

source/_patterns/01-molecules/21-modal/modal.mustache

+<div class="modal__overlay hidden toggle-modal-sample-1" id="modal-sample-1">
+  <div class="modal__content" role="dialog">
+    <div class="modal__container w-full max-w-2xl" role="dialog">
+      <div class="modal__container-body elevation-10">
+        <button class="modal__close" title="Zavřít"><i class="ico--cross"></i></button>
+        {{> molecules-image-card }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<button class="toggle-modal-sample-1">Toggle modal</button>
+
+<script>
+  var toggles = document.getElementsByClassName("toggle-modal-sample-1");
+  var modal = document.getElementById("modal-sample-1");
+
+  for (var i = 0; i < toggles.length; i++) {
+    toggles[i].addEventListener("click", function () {
+      modal.classList.toggle("hidden");
+    })
+
+  }
+
+</script>

source/_patterns/01-molecules/22-images/images.mustache

+{{> atoms-image(classes: "mx-auto my-6 lg:max-w-[800px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 object-contain") }}

source/_patterns/02-organisms/00-global/subnav.mustache

@@ -45,11 +45,11 @@
           </nav>
           <aside class="subnav-aside">
             <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
-              <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
+              <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--cross"></i></a>
               <ui-region-map class="container container--default"></ui-region-map>
             </div>
             <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
-              <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
+              <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--cross"></i></a>
               <div class="container container--default">
                   <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
               </div>

source/_patterns/02-organisms/00-global/navbar.mustache → source/_patterns/02-organisms/01-navbar/navbar.mustache

@@ -28,25 +28,34 @@
                 <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Lidé">
+                <ui-navbar-subitem-replacing label="Lidé" items="[[&quot;Delší link co je delší než hlavní menu položka&quot;, &quot;{{ link.templates-people }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+                  <div class="navbar-menu__submenu-wrap">
                     <ul class="navbar-menu__submenu">
                       <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
                     </ul>
-                </ui-navbar-subtitem>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
+                <ui-navbar-subitem-replacing label="Aktuality" href="{{ link.templates-article-listing }}" items="[[&quot;Detail aktuality&quot;, &quot;{{ link.templates-article-detail }}&quot;]]">
+                  <a href="{{ link.templates-article-listing }}" class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</a>
+                  <div class="navbar-menu__submenu-wrap">
                     <ul class="navbar-menu__submenu">
                       <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
                     </ul>
-                </ui-navbar-subtitem>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Volby">
+                <ui-navbar-subitem-replacing label="Volby" items="[[&quot;Volební rozcestník&quot;, &quot;{{ link.templates-elections }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Volby</span>
+                  <div class="navbar-menu__submenu-wrap">
                     <ul class="navbar-menu__submenu">
                       <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
                     </ul>
-                </ui-navbar-subtitem>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
                 <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>

source/_patterns/02-organisms/02-simplified-footer/simplified-footer.mustache

+<footer class="border-t border-grey-125 pt-4 flex flex-col md:flex-row md:justify-between space-y-4">
+  <img src="/images/logo-full-black.svg" class="w-32" alt="Pirátská strana" />
+  <p>Piráti, 2021. Všechna práva vyhlazena.</p>
+</footer>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-actions.mustache

+<nav class="navbar navbar--simple __js-root">
+  <ui-app inline-template>
+    <ui-navbar inline-template>
+      <div>
+        <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+          <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+            <a href="#">
+              <img src="/images/logo-round-white.svg" class="w-8" />
+            </a>
+            <span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
+          </div>
+          <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+            <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+              <i class="ico--menu text-3xl"></i>
+            </a>
+          </div>
+          <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
+            <div class="flex-grow">
+              {{> molecules-navbar-menu }}
+            </div>
+            <div class="flex items-center space-x-4">
+              {{> atoms-button(classes: "btn--grey-125 btn--hoveractive btn--to-white", cta: "Přihlášení") }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </ui-navbar>
+  </ui-app>
+</nav>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache

+<nav class="navbar navbar--simple __js-root">
+  <ui-app inline-template>
+    <ui-navbar inline-template>
+      <div>
+        <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+          <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+            <a href="#">
+              <img src="/images/logo-round-white.svg" class="w-8" />
+            </a>
+            <span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
+          </div>
+          <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+            <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+              <i class="ico--menu text-3xl"></i>
+            </a>
+          </div>
+          <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
+            <div class="flex-grow">
+              {{> molecules-navbar-menu }}
+            </div>
+          </div>
+          <div class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
+            <div class="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
+              <span class="relative inline-flex h-4 w-4 mr-4" title="Jsi online">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
+                <span class="inline-flex rounded-full w-4 h-4 bg-green-400"></span>
+              </span>
+              <span class="hidden md:block text-grey-200">Jsi online</span>
+            </div>
+            <div class="flex items-center space-x-4">
+              <span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
+              {{> atoms-basic-avatar(classes: "avatar--2xs") }}
+              <button class="text-grey-200 hover:text-white"><i class="ico--log-out"></i></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ui-navbar>
+  </ui-app>
+</nav>

source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar.mustache

+<nav class="navbar navbar--simple __js-root">
+  <ui-app inline-template>
+    <ui-navbar inline-template>
+      <div>
+        <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+          <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+            <a href="#">
+              <img src="/images/logo-round-white.svg" class="w-8" />
+            </a>
+            <span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
+          </div>
+          <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+            <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+              <i class="ico--menu text-3xl"></i>
+            </a>
+          </div>
+          <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
+            <div class="flex-grow">
+              {{> molecules-navbar-menu }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </ui-navbar>
+  </ui-app>
+</nav>

source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache

+<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
+    <div class="lg:row-span-2 lg:col-span-3 order-1">
+      {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
+      <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
+    </div>
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+      </div>
+    </div>
+    <div class="lg:row-span-3 lg:col-span-4 order-2">
+      <img src="/images/hero-profile-img.png" class="h-32 lg:h-80 lg:m-auto hidden md:block object-contain" />
+    </div>
+  </div>
+  <div class="container container--default text-white text-center md:text-left">
+    <hr class="hr--big opacity-25" />
+    <div class="leading-loose grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 text-shadow-lg text-base md:text-sm">
+      <span><a href="#" class="font-bold">Radnice</a></span>
+      <span><a href="#">Praha 1</a></span>
+      <span><a href="#">Praha 2</a></span>
+      <span><a href="#">Praha 3</a></span>
+      <span><a href="#">Praha 4</a></span>
+      <span><a href="#">Praha 5</a></span>
+      <span><a href="#">Praha 6</a></span>
+      <span><a href="#">Praha 7</a></span>
+      <span><a href="#">Praha 8</a></span>
+      <span><a href="#">Praha 9</a></span>
+      <span><a href="#">Praha 10</a></span>
+      <span><a href="#">Praha 11</a></span>
+      <span><a href="#">Praha 12</a></span>
+    </div>
+  </div>
+</article>

source/_patterns/02-organisms/03-hero/elections-hero.mustache

 <article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
-  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
       {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
-      <h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
+      <h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
-        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
+        {{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/hero.mustache

 <article class="hero {{ classes }}">
-  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
+  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-4 lg:col-span-3 order-1">
       <h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
       <div class="mt-4 md:mt-8">
-        {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
+        {{> atoms-icon-button(classes: "btn--black block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg", icon: "ico--chevron-right") }}
       </div>
     </div>
     <div class="lg:row-span-5 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/home-hero.mustache

 <article class="hero py-8 lg:py-16 {{ classes }}">
-  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
     <div class="lg:row-span-2 lg:col-span-3 order-1">
-      <h1 class="head-alt-md md:head-alt-xl">Piráti Pardubického kraje</h1>
+      <h1 class="head-alt-lg md:head-alt-xl">Piráti Pardubického kraje</h1>
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
+        {{> atoms-icon-button(icon: "ico--chevron-right", classes: "block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/image-hero.mustache

-<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
-  <div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
-    <div class="lg:row-span-4 lg:col-span-3 order-1">
-      <h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
-    </div>
-    <div class="lg:row-span-1 lg:col-span-3 order-3">
-      <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
-        {{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
-      </div>
-    </div>
-    <div class="lg:row-span-5 lg:col-span-4 order-2">
-      <img src="/images/hero-profile-img.png" />
+<article class="hero hero--image hero--condensed {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container text-center">
+    <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
+    <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
+      {{> atoms-basic-button(classes: "btn--white btn--autowidth text-sm md:text-lg") }}
     </div>
   </div>
 </article>

source/_patterns/02-organisms/07-forms/form.mustache

@@ -7,5 +7,6 @@
   {{> molecules-radio-field(classes: "col-span-1", wrapperClasses: "form-field__wrapper--col-items") }}
   {{> molecules-select-field(classes: "col-span-2") }}
   {{> molecules-select-field(classes: "col-span-2") }}
+  {{> molecules-textarea-field(classes: "col-span-4") }}
   {{> atoms-button(classes: "col-span-2 text-lg max-w-full btn--black-100", cta: "Odeslat") }}
 </div>

source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache

+{{> organisms-event-feed(withActionMenu: true) }}

source/_patterns/02-organisms/08-event-feed/event-feed.mustache

+<div class="space-y-px {{ classes }}">
+  <div class="bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50 ">
+    <div class="flex items-center justify-between mb-2">
+      <div class="space-x-2 flex items-center">
+        <div class="font-bold text-sm">11:55</div>
+        {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
+    </div>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50">
+    <div class="flex items-center justify-between mb-2">
+      <div class="space-x-2 flex items-center">
+        <div class="font-bold text-sm">11:52</div>
+        {{> molecules-chip(classes: "chip--green-400 chip--condensed", cta: "Schválený návrh postupu")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
+    </div>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
+    <div class="flex items-center justify-between mb-2">
+      <div class="space-x-2 flex items-center">
+        <div class="font-bold text-sm">11:51</div>
+        {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
+    </div>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
+    <div class="flex items-center justify-between mb-2">
+      <div class="space-x-2 flex items-center">
+        <div class="font-bold text-sm">11:43</div>
+        {{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}}
+        <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu &raquo;</a>
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
+    </div>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
+    <div class="flex items-center justify-between mb-2">
+      <div class="space-x-2 flex items-center">
+        <div class="font-bold text-sm">11:35</div>
+        {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
+            </li>
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
+    </div>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
+    <div class="flex items-center justify-between mb-2">
+      <div class="space-x-2 flex items-center">
+        <div class="font-bold text-sm">11:28</div>
+        {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
+    </div>
+    <span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
+  </div>
+  <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
+    <div class="flex items-center justify-between mb-2">
+      <div class="space-x-2 flex items-center">
+        <div class="font-bold text-sm">11:28</div>
+        {{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}}
+      </div>
+      {{# withActionMenu }}
+        <div class="dropdown dropdown--right">
+          <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+          <ul class="dropdown__content text-xs whitespace-no-wrap">
+            <li class="dropdown__content-item bg-white hover:bg-grey-125">
+              <a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
+            </li>
+          </ul>
+        </div>
+      {{/ withActionMenu }}
+    </div>
+    <span class="leading-tight text-sm lg:text-base"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
+  </div>
+</div>

source/_patterns/02-organisms/09-chip-dropdown/chip-dropdown.mustache

+<div class="dropdown">
+  <div class="chip chip--grey-125">
+    <span>Select</span>
+    <span class="chip__icon ico--chevron-down ml-2"></span>
+  </div>
+  <ul class="dropdown__content text-xs whitespace-no-wrap">
+    <li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
+    <li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
+    <li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
+  </ul>
+</div>
+
+
+<div class="dropdown dropdown--right">
+  <div class="chip chip--grey-125">
+    <span>Select</span>
+    <span class="chip__icon ico--chevron-down ml-2"></span>
+  </div>
+  <ul class="dropdown__content text-xs whitespace-no-wrap">
+    <li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
+    <li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
+    <li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
+  </ul>
+</div>

source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache

+<div class="h-screen w-screen flex justify-center items-center">
+  <div class="text-center">
+    <img
+      src="/images/logo-round-black.svg"
+      class="w-24 mb-2 inline-block"
+      alt="Pirátská strana"
+    />
+    <h1 class="head-alt-lg mb-2">Název aplikace</h1>
+    <p class="text-lg">Načítám aplikaci ...</p>
+  </div>
+</div>

source/_patterns/02-organisms/11-vertical-navbar/vertical-navbar.mustache

+<div class="vertical-navbar">
+  <ul class="vertical-navbar__items">
+    <li class="vertical-navbar__item"><a aria-current="page" href="/">Rozcestník</a></li>
+    <li class="vertical-navbar__item vertical-navbar__item--active"><a aria-current="page" href="/registrace">Registrace</a></li>
+    <li class="vertical-navbar__item"><a href="/ubytovani">Ubytování</a></li>
+    <li class="vertical-navbar__item"><a href="/mapa">Mapa</a></li>
+    <li class="vertical-navbar__item"><a href="/organizatori">Organizátoři</a></li>
+    <li class="vertical-navbar__item"><a href="/pro-dobrovolniky">Pro dobrovolníky</a></li>
+  </ul>
+</div>