jekyll-theme-pirati 7.6.2 → 8.0.0.pre.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8b9ceca11b797dc79627a96b3f59d57072fb27ebf567d73b3c34ead8bc035e60
-  data.tar.gz: a48815af6f928a0e02128f5e13645adef9c58e64d89ff83ef20d72f061eaaa12
+  metadata.gz: 98b773876f990b34a2aa8c292d6c0596c19f717fa4abcc046801ee77686ea68d
+  data.tar.gz: 681a9aab4c401e2d571b96107df962b58e11f716adc70c65dc4decb14019a7a8
 SHA512:
-  metadata.gz: 714f8d053aad3414d47a1f2f32ffdf06f4bc6ca2712acab7911be02bb1d76ab78d3b0fa66a36090aa6a126987146db92ae2d4b216afb169650d8ab8fb4c74b1a
-  data.tar.gz: f33bb582218e415fc316620b426a7a3d1f990f87dac4badff383ff9158c0c999b0415a3c854c2e460e943c215993e19c917fdc94866bf6159d73ad7bd2a0c188
+  metadata.gz: 055ad26baa405cc3add1959d4429b0f910b2b36dd6df1166359b8374c681b581664aed365ca63e4782b55d3d57c587d90903bf3cb202c407f68daa4eb3e36ffd
+  data.tar.gz: 8e88803ff7b66c8106a9c9d29bb77fd23380addbbb0e97e49b6e4eca16af4eaf20ef48040eccdabfdca0222231787fbbc76eb319cb4ce74ed9347cc2476cf759

data/_data/campaigns.yml

@@ -3,6 +3,15 @@
 
 - groupUid: volby-2018  # identifier of the group, to be used in program point
   title: Volby 2018     # title of the campaign group
+  subLinks:
+    - title: Povolební strategie
+      icon: ico--strategy
+      classes: bg-grey-125 hover:bg-black hover:text-white
+      href: /
+    - title: Financování kampaně
+      icon: ico--calculator
+      classes: bg-black text-white hover:bg-grey-125 hover:text-black
+      href: /
   campaigns:
     - title: Program na radnici   # individual campaigns within the group
       categoryUid: praha2018

data/_data/menu.yml

@@ -1,13 +1,13 @@
 top:
   - link: "pirati.cz"
     url:  "https://www.pirati.cz"
-    icon: "fa fa-home"
-  - link: "wiki.pirati.cz"
-    url:  "https://wiki.pirati.cz"
-    icon: "fa fa-home"
+    icon: "ico--home"
+  - link: "piratskyobchod.cz"
+    url:  "https://piratskyobchod.cz"
+    icon: "ico--cart"
   - link: "Pirátské listy"
     url:  "http://www.piratskelisty.cz"
-    icon: "fa fa-newspaper-o"
+    icon: "ico--newspaper"
 
 main:
   - link: /
@@ -25,7 +25,10 @@ main:
         match: lide
       - link: /regiony/
         name: Místní sdružení
-        match: reriony
+        match: regiony
+      - link: /regiony/index2.html
+        name: Jiný rozcestník
+        match: index2
   - link: /komunalni-volby/praha2018
     name: Komunální volby
     match: komunalni-volby
@@ -42,6 +45,9 @@ main:
   - link: /pripoj-se/
     name: Připoj se
     match: pripoj-se
+  - link: /piratske-centrum/
+    name: Piratské centrum
+    match: piratske-centrum
   - link: /kontakt/
     name: Kontakt
     match: kontakt
@@ -63,15 +69,9 @@ bottom:
         name: Volby
       - link: /aktuality/
         name: Aktuality
-  - class: small-12 medium-4
-    title: Otevřenost
-    links:
-      - link: https://ucet.pirati.cz
-        name: Transparentní účet
-      - link: https://smlouvy.pirati.cz
-        name: Registr smluv
-      - link: https://wiki.pirati.cz/fo/otevrene_ucetnictvi
-        name: Otevřené účetnictví
+
+# Display transparency section in the footer?
+transparencySection: true
 
 contact:
   - id: jakub.pirat

data/_includes/404.html

@@ -1,20 +1,4 @@
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>404 Stránka nebyla nalezena :(</strong></p>
+<div class="container container--default content-block py-8 lg:py-24">
+  <h1 class="head-alt-lg">404 Stránka nebyla nalezena :(</h1>
   <p>Litujeme, ale požadovaná stránka nebyla na našem serveru nalezena.</p>
 </div>

data/_includes/article-infobox.html

@@ -1 +1,5 @@
-<div class="c-article-infobox">{{ include.content }}</div>
+<div class="card elevation-10">
+  <div class="card__body content-block">
+    {{ include.content }}
+  </div>
+</div>

data/_includes/articles/author.html

@@ -1,8 +1,8 @@
 {% if include.article.authorId %}
-{% assign author = site.people | where_exp:"item","item.uid contains include.article.authorId" | first %}
-<a href={{author.url}}>
+  {% assign author = site.people | where_exp:"item","item.uid contains include.article.authorId" | first %}
+  <a href={{author.url}}>
     {{author.name}}
-</a>
+  </a>
 {% else %}
-{{ include.article.author }}
+  {{ include.article.author }}
 {% endif %}

data/_includes/articles/horizontal-article.html

@@ -4,7 +4,11 @@
   <div class="c-article-listing__row">
     <div class="c-article-listing__photobox">
       <div itemprop="image" itemtype="http://schema.org/ImageObject" class="c-article-listing__image {% if include.article.youtubeVideoId %}c-article-listing__image--videoicon{% endif %}" itemscope="">
-        {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize="348x232^" magick:gravity='center' magick:crop='348x232+0+0' @path %}{% endcapture %}
+        {% if site.mediaStorage %}
+            {% capture imgPath %}https://a.pirati.cz/resize/348x232/{{ site.mediaStorage }}/img/{{ include.article.image }}{% endcapture %}
+        {% else %}
+            {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize="348x232^" magick:gravity='center' magick:crop='348x232+0+0' @path %}{% endcapture %}
+        {% endif %}
         <a href="{{ include.article.url | relative_url }}">
           <img src="{{ imgPath }}" alt="{{ include.article.title }}">
         </a>

data/_includes/articles/list-responsive.html

@@ -1,9 +1,5 @@
-<div class="o-section-block">
-  <div class="row u-uniform-size-row">
-    {% for article in include.posts %}
-      <div class="medium-6 large-4 columns {% if forloop.last %}end{% endif %}">
-        {% include articles/vertical-article.html article=article %}
-      </div>
-    {% endfor %}
-  </div>
+<div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+  {% for article in include.posts %}
+    {% include articles/vertical-article.html article=article %}
+  {% endfor %}
 </div>

data/_includes/articles/pagination.html

@@ -1,27 +1,26 @@
-<ul class="c-pagination text-center" role="navigation" aria-label="Pagination">
-  {% if include.paginator.page != 1 %}
-  <li class="c-pagination__previous c-pagination__link">
-    <a class="c-pagination__anchor" href="{{ include.paginator.previous_page_path }}" aria-label="Předchozí stránka">Předchozí</a>
-  </li>
-  {% endif %}
+<div class="pagination-container" role="navigation" aria-label="Pagination">
+  <nav class="pagination space-x-1">
+    {% if include.paginator.page != 1 %}
+      {% include buttons/icon.html href=include.paginator.previous_page_path cta="Předchozí" icon="ico--chevron-left" class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon" aria_label="Předchozí stránka" %}
+    {% endif %}
 
-  {% for page in (1..include.paginator.total_pages) %}
-  <li class="c-pagination__link{% if page == include.paginator.page %}  c-pagination__link--current{% endif %}">
-    {% if page == include.paginator.page %}
-      <span class="c-pagination__anchor">{{ forloop.index }}</span>
-    {% else %}
-      {% if forloop.index == 1 %}
-        <a class="c-pagination__anchor" href="/aktuality/" aria-label="Stránka {{ forloop.index }}">{{ forloop.index }}</a>
+    {% for page in (1..include.paginator.total_pages) %}
+      {% if page == include.paginator.page %}
+        {% include buttons/basic.html href=include.paginator.previous_page_path cta=forloop.index class="btn--grey-500 btn--condensed hidden md:inline-block" %}
       {% else %}
-        <a class="c-pagination__anchor" href="/aktuality/{{forloop.index}}/" aria-label="Stránka {{ forloop.index }}">{{ forloop.index }}</a>
+        {% capture aria_label %}Stránka {{ forloop.index }}{% endcapture %}
+        {% if forloop.index == 1 %}
+          {% include buttons/basic.html href="/aktuality/" href=include.paginator.previous_page_path cta=forloop.index class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block" aria_label=aria_label %}
+        {% else %}
+          {% capture href %}/aktuality/{{forloop.index}}/{% endcapture %}
+          {% include buttons/basic.html href="/aktuality/" href=href cta=forloop.index class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block" aria_label=aria_label %}
+        {% endif %}
       {% endif %}
+    {% endfor %}
+
+    {% if include.paginator.page != include.paginator.total_pages %}
+      {% include buttons/icon.html href=include.paginator.next_page_path cta="Další" icon="ico--chevron-right" class="btn--grey-125 btn--hoveractive btn--to-black btn--condensed" aria_label="Další stránka" %}
     {% endif %}
-  </li>
-  {% endfor %}
+  </nav>
+</div>
 
-  {% if include.paginator.page != include.paginator.total_pages %}
-  <li class="c-pagination__next c-pagination__link">
-    <a class="c-pagination__anchor" href="{{ include.paginator.next_page_path }}" aria-label="Další stránka">Další</a>
-  </li>
-  {% endif %}
-</ul>

data/_includes/articles/tag-filtered-news.html

@@ -0,0 +1,16 @@
+{% assign posts = "" | split: ", " %}
+{% for tag in include.tags %}
+    {% assign tagPosts = site.posts | where_exp: "item","item.tags contains tag" %}
+    {% assign posts = posts | concat: tagPosts %}
+{% endfor %}
+{% assign posts = posts | sort: "date" | reverse %}
+
+<section class="o-section o-section--spaceBot">
+  <div class="o-section-inner o-section-inner--leftBlock">
+    {% for article in posts limit: include.limit %} {% include articles/horizontal-article.html article=article %}
+    {% endfor %}
+    <div class="c-BlogPosting-excerpt-nextBox">
+      <a href="{{'/aktuality/' | relative_url}}" rel="next" class="button expanded large">Další články</a>
+    </div>
+  </div>
+</section>

data/_includes/articles/vertical-article.html

@@ -1,46 +1,58 @@
 <!-- include.article -->
-<article itemtype="http://schema.org/BlogPosting" class="c-article-listing c-article-listing--vertical" itemscope="">
-  <link itemprop="mainEntityOfPage" href="{{ include.article.url | absolute_url }}">
+<article itemtype="http://schema.org/BlogPosting" class="card card--hoveractive article-card {% if include.article.important %}bg-black{% endif %}" itemscope="">
+  <link itemprop="mainEntityOfPage" href="{{ include.article.url }}">
 
-  <div class="c-article-listing__photobox">
-    <a href="{{ include.article.url | relative_url }}">
-      <div itemprop="image" itemtype="http://schema.org/ImageObject" class="c-article-listing__image {% if include.article.youtubeVideoId %}c-article-listing__image--videoicon{% endif %}" itemscope="">
-        {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize='751x422^' magick:gravity='center' magick:crop='751x422+0+0' @path %}{% endcapture %}
-        <img src="{{ imgPath }}" alt="{{ include.article.title }}">
-        <meta itemprop="url" content="{{ imgPath }}">
-      </div>
+  <div class="article-card-cover">
+    <a href="{{ include.article.url | relative_url }}" itemprop="image" itemtype="http://schema.org/ImageObject" itemscope="">
+      {% if site.mediaStorage %}
+          {% capture imgPath %}https://a.pirati.cz/resize/348x232/{{ site.mediaStorage }}/img/{{ include.article.image }}{% endcapture %}
+      {% else %}
+          {% capture imgPath %}{% asset '{{ include.article.image }}' magick:resize='751x422^' magick:gravity='center' magick:crop='751x422+0+0' @path %}{% endcapture %}
+      {% endif %}
+      <img src="{{ imgPath }}" alt="{{ include.article.title }}">
+      <meta itemprop="url" content="{{ imgPath }}">
     </a>
-  </div>
 
-  <div class="c-article-listing__meta">
-    <div class="c-metadata-block-section">
-      <!-- Date published -->
-      <span itemprop="description" class="c-metadata-block-section__item">
-        <i class="fa fa-calendar-o" aria-hidden="true"></i> {{ include.article.date | date: "%d.%m.%Y" }}
-        <meta itemprop="datePublished" content="{{ include.article.date | date_to_xmlschema }}" />
-      </span>
+    <div class="article-card-cover__details">
+      <div class="article-card-sharing">
+        {% comment %} {{> molecules-small-colored-social-icon-group }} {% endcomment %}
+      </div>
 
-      <!-- Authors -->
-      <span itemprop="author" itemtype="http://schema.org/Person" class="c-metadata-block-section__item" itemscope="">
-        <i class="fa fa-user" aria-hidden="true"></i>
-        <span itemprop="name">
-            {% include articles/author.html article=include.article %}
+      <div class="article-card-meta"  class="c-metadata-block-section__item" >
+        <span itemprop="description" class="article-card-meta__item">
+          {{ include.article.date | date: "%d.%m.%Y" }}
+          <meta itemprop="datePublished" content="{{ include.article.date | date_to_xmlschema }}" />
+        </span>
+        <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+          {% capture author_name %}
+            {% if include.article.authorId -%}
+              {% assign author = site.people | where_exp:"item","item.uid contains include.article.authorId" | first %}
+              {{ author.name }}
+            {%- else -%}
+              {{ include.article.author }}
+            {%- endif %}
+          {% endcapture %}
+          <span itemprop="name">{{ author_name }}</span>
         </span>
-      </span>
+      </div>
+
     </div>
   </div>
-
-  <div class="c-article-listing__content">
-    <!-- Headline -->
-    <h1 itemprop="headline" class="c-article-listing__headline t-h4">
-      <a class="c-headline-anchor" href="{{ include.article.url | relative_url }}" itemprop="url">{{ include.article.title }}</a>
-    </h1>
-    <p itemprop="description" class="c-article-listing__perex u-stacked t-font-features">{{ include.article.excerpt | truncatewords: 35 | strip_html }}</p>
-    <a class="c-emphasized-anchor u-stacked" href="{{ include.article.url | relative_url }}">Přečíst celý článek &rsaquo;</a>
+  <div class="card__body article-card__body">
+    <a href="{{ include.article.url | relative_url }}" {% if include.article.important %}class="hover:line-white"{% endif %}><h1 class="card-headline mb-4 {% if include.article.important %}text-white{% endif %}">{{ include.article.title }}</h1></a>
+    <p class="card-body-text flex-grow {% if include.article.important %}text-white{% endif %}">{{ include.article.excerpt | truncatewords: 35 | strip_html }}</p>
+    {% if include.article.tags %}
+      <div class="inline-block-nogap mt-4">
+        {% for tag in include.article.tags %}
+          {% capture tagUrl %}{{ tag | prepend: '/tags/#' | relative_url }}{% endcapture %}
+          {% capture tagClass %}article-card__category-button btn--condensed text-sm font-light {% if include.article.important %}btn--grey-700{% else %}btn--grey-125{% endif %}{% endcapture %}
+          {% include buttons/basic.html class=tagClass cta=tag href=tagUrl %}
+        {% endfor %}
+      </div>
+    {% endif %}
   </div>
 
-  <!-- Publisher -->
-  <div itemprop="publisher" itemtype="http://schema.org/Organization" class="u-hidden" itemscope="">
+  <div itemprop="publisher" itemtype="http://schema.org/Organization" class="hidden" itemscope="">
     <div itemprop="logo" itemtype="http://schema.org/ImageObject" itemscope="">
       <meta itemprop="url" content="{{ 'assets/img/brand/logo.svg' | relative_url }}">
     </div>

data/_includes/avatar.html

@@ -0,0 +1,9 @@
+{% if include.url %}
+  <a href="{{ include.url }}" class="avatar {% if include.class %}{{ include.class }}{% endif %}">
+    <img src="{{ include.src }}" alt="{{ include.alt }}" />
+  </a>
+{% else %}
+  <div class="avatar {% if include.class %}{{ include.class }}{% endif %}">
+    <img src="{{ include.src }}" alt="{{ include.alt }}" />
+  </div>
+{% endif %}

data/_includes/buttons/basic.html

@@ -0,0 +1,3 @@
+<{% if include.href %}a href="{{ include.href }}"{% else %}button{% endif %} class="btn {{ include.class }}"  {% if include.rel %}rel="{{ include.rel }}"{% endif %} {% if include.aria_label %}aria-label="{{ include.aria_label }}"{% endif %}>
+  <div class="btn__body {{ include.body_class }}">{{ include.cta }}</div>
+</{% if include.href %}a{% else %}button{% endif %}>

data/_includes/buttons/icon.html

@@ -0,0 +1,8 @@
+<{% if include.href %}a href="{{ include.href }}"{% else %}button{% endif %} class="btn btn--icon {{ include.class }}" {% if include.rel %}rel="{{ include.rel }}"{% endif %} {% if include.aria_label %}aria-label="{{ include.aria_label }}"{% endif %}>
+  <div class="btn__body-wrap">
+    <div class="btn__body {{ include.body_class }}">{{ include.cta }}</div>
+    <div class="btn__icon {{ include.icon_class }}">
+      <i class="{{ include.icon }}"></i>
+    </div>
+  </div>
+</{% if include.href %}a{% else %}button{% endif %}>

data/_includes/buttons/super.html

@@ -0,0 +1,4 @@
+<a href="{{ include.href }}" class="super-button {{ include.class }}"  {% if include.rel %}rel="{{ include.rel }}"{% endif %} {% if include.aria_label %}aria-label="{{ include.aria_label }}"{% endif %}>
+  <span class="super-button__body">{{ include.cta }}</span>
+  <i class="super-button__icon {{ include.icon }}"></i>
+</a>

data/_includes/calendar.html

@@ -0,0 +1,21 @@
+<div class="__js-root">
+  {% if site.env.GOOGLE_CALENDAR_APIKEY and include.calendarId %}
+    <ui-calendar-google-provider v-slot="{ events, onShowMore, hasMore }" :calendar-id="'{{ include.calendarId }}'" :api-key="'{{ site.env.GOOGLE_CALENDAR_APIKEY }}'">
+      <ui-calendar-renderer
+        :events="events"
+        :on-show-more="onShowMore"
+        :has-more="hasMore" :name="'{{ include.calendarTitle | default: 'Kalendář' }}'"
+        {% if include.hideBanner %}:show-banner="false"{% endif %}
+      ></ui-calendar-renderer>
+    </ui-calendar-google-provider>
+  {% else %}
+    {% if include.calendarPage %}
+      <iframe src="{{ include.calendarPage }}" style="border-width:0; width: 100%; height: 410px; border: 0; overflow: hidden;"></iframe>
+      <p class="mt-4">
+        <a class="btn btn--orange-200 btn--hoveractive" href="{{ include.calendarPage | relative_url }}">
+          <span class="btn__body">Zobrazit všechny akce</span>
+        </a>
+      </p>
+    {% endif %}
+  {% endif %}
+</div>

data/_includes/candidate-badge.html

@@ -1,19 +1,51 @@
-<div class="c-program-candidate-badge">
-  <a class="c-program-candidate-badge__body" href="{{ include.candidatePage.url | relative_url }}">
-      <span class="c-program-candidate-badge__rank"><span>{{ include.rank }}</span></span>
-      <div class="c-program-candidate-badge__avatar">
-          {% capture img %}{% if include.candidatePage.img %}{% asset '{{ include.candidatePage.img }}' magick:resize='225x225^' magick:gravity='center' magick:crop='225x225+0+0' @path %}{% else %}{{ 'assets/img/people/unknown-pirate.svg' | relative_url }}{% endif %}{% endcapture %}
-          <img src="{{ img }}" alt="{% include people/fullname.html person=include.candidatePage plain=true %}" class="c-program-candidate-badge__avatar-image">
+<div class="candidate-card container-padding--zero sm:container-padding--auto {{ include.class }}">
+  <div class="candidate-card__wrapper {{ include.wrapperClass }}">
+    <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
+      <div class="candidate-card__avatar">
+        <div class="candidate-card__position">{{ include.rank }}</div>
+
+        {% if include.candidatePage.img %}
+          {% if site.mediaStorage %}
+              {% capture img %}https://a.pirati.cz/resize/225x225/{{ site.mediaStorage }}/img/{{ include.candidatePage.img }}{% endcapture %}
+          {%- else -%}
+              {% capture img %}{% asset '{{ include.candidatePage.img }}' magick:resize='225x225^' magick:gravity='center' magick:crop='225x225+0+0' @path %}{% endcapture %}
+          {%- endif -%}
+        {% else %}
+          {% capture img %}https://a.pirati.cz/common/img/people/unknown-pirate.svg{% endcapture %}
+        {% endif %}
+
+        {% capture img_alt %}{% include people/fullname.html person=include.candidatePage plain=true %}{% endcapture %}
+        {% include avatar.html url=include.candidatePage.url class="avatar--sm sm:avatar--lg" src=img alt=img_alt %}
       </div>
-      <div class="c-program-candidate-badge__description">
-          <h4 class="c-program-candidate-badge__name"><span class="c-headline-anchor">{% include people/fullname.html person=include.candidatePage %}</span></h4>
-          <strong class="c-program-candidate-badge__profession">
-              {% if include.candidate.age %} {{ include.candidate.age }} let, {% endif %}
-              {{ include.candidate.profession }}{% if include.candidate.party %}, {{ include.candidate.party }} {% endif %}
-          </strong>
-          {% if include.candidate.description %}
-          <p class="c-program-candidate-badge__bio">{{ include.candidate.description }}</p>
-          {% endif %}
+      <div class="candidate-card__bio">
+        <h1 class="head-heavy-xs">
+          <a href="{{ include.candidatePage.url|relative_url }}">{% include people/fullname.html person=include.candidatePage %}</a>
+        </h1>
+        {% if include.candidatePage.mail %}
+          <div class="font-light mb-4">{{ include.candidatePage.mail }}</div>
+        {% endif %}
+        <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ include.candidate.profession }}</h2>
       </div>
-  </a>
+      <div class="candidate-card__affiliation">
+        {% if include.candidate.age %}<div>{{ include.candidate.age }} let</div>{% endif %}
+
+        {% if include.candidate.party %}
+          <div>
+            {% if include.candidate.partyImg %}
+              {% comment %}We expect an SVG format here to make things scalable{% endcomment %}
+              {% capture partyImg %}{{ include.candidate.partyImg | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+              {% include avatar.html class="w-6 mr-2" alt=include.candidate.party src=partyImg %}
+            {% endif %}
+            <span class="font-bold font-condensed">{{ include.candidate.party }}</span>
+          </div>
+        {% endif %}
+      </div>
+      <div class="card__body candidate-card__social">
+        {% if include.candidate.description %}
+          <p class="font-light text-sm leading-snug italic mb-4 hidden md:block">{{ include.candidate.description }}</p>
+        {% endif %}
+        {% comment %} {{> molecules-basic-social-icon-group }} {% endcomment %}
+      </div>
+    </div>
+  </div>
 </div>

data/_includes/contact-line.html

@@ -0,0 +1,4 @@
+<{% if include.href %}a href="{{ include.href }}"{% else %}span{% endif %} class="contact-line icon-link {{ include.class }}" {% if include.target == "_blank" %}target="_blank" rel="noopener noreferrer"{% endif %}>
+  <i class="{{ include.icon }}"></i>
+  <span>{{ include.caption }}</span>
+</{% if include.href %}a{% else %}span{% endif %}>