diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.html
new file mode 100644
index 0000000000000000000000000000000000000000..24b55e229284e8cd3f8609c07a0beea912894b7f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.html
@@ -0,0 +1,21 @@
+<div
+  class="
+    flex flex-col bg-grey-180 drop-shadow
+
+    {{ classes }}
+  "
+>
+  <div class="flex flex-col px-8 pb-10 pt-6 h-full">
+    <div class="text-xl text-grey-350 mb-2">
+      {{ date }}
+    </div>
+
+    <a href="{{ url }}" class="mb-2 underline-offset-4">
+      <h2 class="font-alt text-4xl">{{ title }}</h2>
+    </a>
+
+    <div>
+      {% include 'patterns/molecules/tags/inline_tags.html' %}
+    </div>
+  </div>
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.yaml b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..7eca8c01e3b4c97b4a6027352c2667e4b759c9d9
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.yaml
@@ -0,0 +1,4 @@
+context:
+  title: 'KONEC MEZINÁRODNÍ OSTUDY. EVROPSKÁ KOMISE UZAVŘELA ŘÍZENÍ O STŘETU ZÁJMŮ'
+  date: '29. června 2023'
+  url: '#'
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/article_titles_list.html b/majak_uistyleguide/templates/patterns/organisms/articles/article_titles_list.html
new file mode 100644
index 0000000000000000000000000000000000000000..b69bf4d6ad54edfe10b9a6eb2dd0301e3aa97eb8
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/article_titles_list.html
@@ -0,0 +1,18 @@
+<div class="flex justify-center">
+  <div class="container--wide w-full">
+    <div class="flex flex-col gap-8 mb-16">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+        {% include 'patterns/molecules/articles/article_title_preview.html' %}
+        {% include 'patterns/molecules/articles/article_title_preview.html' %}
+        {% include 'patterns/molecules/articles/article_title_preview.html' %}
+        {% include 'patterns/molecules/articles/article_title_preview.html' %}
+        {% include 'patterns/molecules/articles/article_title_preview.html' %}
+        {% include 'patterns/molecules/articles/article_title_preview.html' %}
+      </div>
+
+      <div class="flex justify-center">
+        {% include 'patterns/atoms/buttons/round_button.html' with button_text='Další články' %}
+      </div>
+    </div>
+  </div>
+</div>