diff --git a/shared/templates/shared/article_preview.html b/shared/templates/shared/article_preview.html
index 5227cf33daeef4f6353dbbb5c2583e2f83673d2c..e2b4521cdbc50e5e6f91d7576dd6e7400f7b8160 100644
--- a/shared/templates/shared/article_preview.html
+++ b/shared/templates/shared/article_preview.html
@@ -1,6 +1,6 @@
{% load wagtailcore_tags wagtailimages_tags %}
-<article itemtype="http://schema.org/BlogPosting" class="card card--hoveractive article-card bg-black" itemscope="">
+<article itemtype="http://schema.org/BlogPosting" class="card card--hoveractive article-card" itemscope="">
<link itemprop="mainEntityOfPage" href="{{ article.url }}">
@@ -32,23 +32,25 @@
{{ article.date|date:"SHORT_DATE_FORMAT" }}
<meta itemprop="datePublished" content="{{ article.last_published_at }}" />
</span>
- <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
- <span itemprop="name">{{ article.author }}</span>
- </span>
+ {% if article.author %}
+ <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+ <span itemprop="name">{{ article.author }}</span>
+ </span>
+ {% endif %}
</div>
</div>
</div>
<div class="card__body article-card__body">
- <a href="{{ article.url }}" class="hover:line-white"><h1 class="card-headline mb-4 text-white">{{article.title}}</h1></a>
- <p class="card-body-text flex-grow text-white">{{article.perex}}</p>
+ <a href="{{ article.url }}"><h1 class="card-headline mb-4">{{article.title}}</h1></a>
+ <p class="card-body-text flex-grow">{{article.perex}}</p>
<div class="inline-block-nogap mt-4">
- {% for tag in article.tags.all %}
- <a href="{{ page.root_page.tags_page.url }}#{{ tag }}" class="btn article-card__category-button btn--condensed text-sm font-light btn--grey-700 p-0" >
- <div class="btn__body">{{ tag }}</div>
- </a>
- {% endfor %}
+ {% for tag in article.tags.all %}
+ <a href="{{ page.root_page.tags_page.url }}#{{ tag }}" class="btn article-card__category-button btn--condensed text-sm font-light btn--grey-700 p-0" >
+ <div class="btn__body">{{ tag }}</div>
+ </a>
+ {% endfor %}
</div>
</div>
diff --git a/shared/templates/styleguide/2.3.x/article_card.html b/shared/templates/styleguide/2.3.x/article_card.html
new file mode 100644
index 0000000000000000000000000000000000000000..24edf2f606116615334a7e5602e226d193094fae
--- /dev/null
+++ b/shared/templates/styleguide/2.3.x/article_card.html
@@ -0,0 +1,60 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<article class="card card--hoveractive article-card " itemtype="http://schema.org/BlogPosting" itemscope="">
+ <link itemprop="mainEntityOfPage" href="{% pageurl article %}">
+
+ <div class="article-card-cover">
+ <a href="{% pageurl article %}" itemprop="image" itemtype="http://schema.org/ImageObject" itemscope="">
+ {% image article.image width-800 as img %}
+ <img src="{{ img.url }}" alt="{{ article.title }}">
+ <meta itemprop="url" content="{{ img.url }}">
+ </a>
+ <div class="article-card-cover__details">
+ <div class="article-card-sharing">
+ <div class="social-icon-group ">
+ <a
+ href="https://www.facebook.com/sharer/sharer.php?u={% pageurl article %}"
+ onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+ class="social-icon social-icon--fill bg-brands-facebook text-white text-sm social-icon--4"
+ ><i class="ico--facebook"></i></a>
+ <a
+ href="https://twitter.com/intent/tweet?text={{ article.title }}&url={% pageurl article %}"
+ onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
+ class="social-icon social-icon--fill bg-brands-twitter text-white text-sm social-icon--4"
+ ><i class="ico--twitter"></i></a>
+ </div>
+ </div>
+ <div class="article-card-meta">
+ <span class="article-card-meta__item" itemprop="description">{{ article.date|date:"SHORT_DATE_FORMAT" }}</span>
+ {% if article.author %}
+ <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+ <span itemprop="name">{{ article.author }}</span>
+ </span>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+
+ <div class="card__body article-card__body">
+ <a href="{% pageurl article %}">
+ <h1 class="card-headline mb-4">{{ article.title }}</h1>
+ </a>
+ <p class="card-body-text flex-grow">{{ article.perex }}</p>
+
+ {# TODO tags #}
+ {% comment %}
+ <div class="inline-block-nogap mt-4">
+ <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
+ <div class="btn__body ">Kategorie 1</div>
+ </button>
+ <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
+ <div class="btn__body ">Kategorie 2</div>
+ </button>
+ <button class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
+ <div class="btn__body ">Dlouhá kategorie 3</div>
+ </button>
+ </div>
+ {% endcomment %}
+
+ </div>
+</article>
diff --git a/shared/templates/styleguide/2.3.x/article_card_list.html b/shared/templates/styleguide/2.3.x/article_card_list.html
new file mode 100644
index 0000000000000000000000000000000000000000..eaeba5854a624bddcdead17cc3d86536fee13e8b
--- /dev/null
+++ b/shared/templates/styleguide/2.3.x/article_card_list.html
@@ -0,0 +1,5 @@
+<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 articles %}
+ {% include "styleguide/2.3.x/article_card.html" %}
+ {% endfor %}
+</div>
diff --git a/shared/templates/styleguide/2.3.x/pagination.html b/shared/templates/styleguide/2.3.x/pagination.html
new file mode 100644
index 0000000000000000000000000000000000000000..967622a34c7f3bf9e1dc95a7aedbe5ed114c125c
--- /dev/null
+++ b/shared/templates/styleguide/2.3.x/pagination.html
@@ -0,0 +1,39 @@
+{% load wagtailcore_tags %}
+
+<div class="pagination-container">
+ <nav class="pagination space-x-1">
+
+ {% if paginator.has_previous %}
+ <a href="{% pageurl page %}?page={{ paginator.previous_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">pĹ™edchozĂ</div>
+ <div class="btn__icon ">
+ <i class="ico--chevron-left"></i>
+ </div>
+ </div>
+ </a>
+ {% endif %}
+
+ {% for i in paginator.paginator.page_range %}
+ {% if i == paginator.number %}
+ <a href="{% pageurl page %}?page={{ i }}" class="btn btn--grey-500 btn--condensed hidden md:inline-block">
+ {% else %}
+ <a href="{% pageurl page %}?page={{ i }}" class="btn btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block">
+ {% endif %}
+ <div class="btn__body ">{{ i }}</div>
+ </a>
+ {% endfor %}
+
+ {% if paginator.has_next %}
+ <a href="{% pageurl page %}?page={{ paginator.next_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">dalšĂ</div>
+ <div class="btn__icon ">
+ <i class="ico--chevron-right"></i>
+ </div>
+ </div>
+ </a>
+ {% endif %}
+
+ </nav>
+</div>