diff --git a/assets/components/content-types/news/news-horizontal-listing-gray.twig b/assets/components/content-types/news/news-horizontal-listing-gray.twig
new file mode 100644
index 00000000..0867a901
--- /dev/null
+++ b/assets/components/content-types/news/news-horizontal-listing-gray.twig
@@ -0,0 +1,36 @@
+<div class="card-slider-wrapper">
+  <div class="card-slider">
+  {% for i in 1..10 %}
+    <div class="card-slider-cell">
+      <a href="#" class="card link-trapeze-horizontal">
+        <div class="card-body">
+        {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
+          <div itemscope itemtype="http://schema.org/Article">
+            <h3 class="card-title h5 mt-3" itemprop="name">Physics: new e-books for the AIAA Education Series</h3>
+            <p>
+              <time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
+              <span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+                Epicureum esse, si probarem, quae ille diceret?</span>
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+  </div>
+
+  <div class="card-slider-footer">
+    <div>
+      <button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-left"></use>
+        </svg>
+      </button>
+      <button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-right"></use>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/assets/components/content-types/news/news-horizontal-listing.twig b/assets/components/content-types/news/news-horizontal-listing.twig
new file mode 100644
index 00000000..c02d265d
--- /dev/null
+++ b/assets/components/content-types/news/news-horizontal-listing.twig
@@ -0,0 +1,36 @@
+<div class="card-slider-wrapper">
+  <div class="card-slider">
+  {% for i in 1..10 %}
+    <div class="card-slider-cell">
+      <a href="#" class="card card-gray link-trapeze-horizontal">
+        <div class="card-body">
+        {% include '@atoms/picture/picture.twig' with {'variant':'news-thumb'} %}
+          <div itemscope itemtype="http://schema.org/Article">
+            <h3 class="card-title h5 mt-3" itemprop="name">Physics: new e-books for the AIAA Education Series</h3>
+            <p>
+              <time datetime="2018-03-26" itemprop="datePublished"><span class="sr-only">Published:</span>26.03.2018</time>
+              <span class="text-muted" itemprop="description">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+                Epicureum esse, si probarem, quae ille diceret?</span>
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  {% endfor %}
+  </div>
+
+  <div class="card-slider-footer">
+    <div>
+      <button role="button" id="card-slider-prev" class="card-slider-btn link-trapeze-horizontal disabled">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-left"></use>
+        </svg>
+      </button>
+      <button role="button" id="card-slider-next" class="card-slider-btn link-trapeze-horizontal">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-chevron-right"></use>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/assets/components/content-types/news/news.yml b/assets/components/content-types/news/news.yml
index 90eba901..a7a60881 100644
--- a/assets/components/content-types/news/news.yml
+++ b/assets/components/content-types/news/news.yml
@@ -1,6 +1,13 @@
 title: News
 name: news
 variants:
+  - name: horizontal-listing
+    title: Horizontal Listing
+    notes: Don't forget to wrap your card slider with a wrapper that will hide the overflow (`.overflow-hidden` helper class will achieve just that).
+  - name: horizontal-listing-gray
+    title: Horizontal Listing with gray background
+    notes: Don't forget to wrap your card slider with a wrapper that will hide the overflow (`.overflow-hidden` helper class will achieve just that).
+    wrapper: bg-gray-100 py-4 my-4
   - name: highlighted
     title: Highlighted
   - name: highlighted-carousel