diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35c30d196ebc7b9f2381c8e85336f53df9f84a99..fc5b6a7f93e8e30126a117b92c436de3e777042a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,25 @@
- Changelog
+<<<<<<< CHANGELOG.md
+# Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 26-02-2019
+### Fixed
+- Error in views that use Horizontal Boxes [provided default value]
+- Fixed default-row-class value being kept even after overriden
+
+### Added
+- Collision display format
+- Countdown display format
+- Teaser List display format
+
+### Changed
+- Improved code by changing format conditionals (name to ID)
+- Font-size of Teaser List
+
 ## [1.1.0] - 22-11-2018
 ### Added
 - Accordion as display format
diff --git a/README.md b/README.md
index f007cccf982216259781c3c31cf2c3fac287c6e3..ee989ee1029d705e9e508d8c2f20f7adbf53c57e 100755
--- a/README.md
+++ b/README.md
@@ -2,10 +2,14 @@
 
 Provides a set of display formats designed for the needs of the CERN users.
 
-Until v1.1 the implemented display formats are:
+Until v1.2.0 the implemented display formats are:
 
 * Accordion: Renders the content in an accordion type style.
 * Horizontal Boxes: Renders the content in a style of cards with the option to use carousel to navigate.
+* Accordion: Renders the view rows in the style of an accordion
+* Teaser List: Renders the view rows the one under the other with appropriate spacing
+* Collision: Renders the view rows creating a "collision" effect
+* Countdown: Renders the view row with a countdown effect
 
 ## Getting Started
 
@@ -17,12 +21,10 @@ If the module for any reason is not placed under the CERN infra, then you can ma
 
 The module has the following dependencies:
 
-* Views: Core module. You don't have to worry about it.
-* CERN Components: This dependency exists due to the fact that most of the displays formats use display modes that are provided by the cern_components module
-
-## Contributing
-
-Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
+* **Views**: Core module. You don't have to worry about it.
+* **CERN Components**: This dependency exists due to the fact that most of the displays formats use display modes that 
+are provided by the cern_components module. **Important Note**: Since version 1.2.0, the CERN Display Formats module 
+requires the version 2.4.0 or higher of CERN Components.
 
 ## Versioning
 
diff --git a/assets/css/teaser-list.css b/assets/css/teaser-list.css
new file mode 100644
index 0000000000000000000000000000000000000000..abac940c4d61a1e5a3a1129313e327561a3674d2
--- /dev/null
+++ b/assets/css/teaser-list.css
@@ -0,0 +1,4 @@
+.teaser-list .views-row .preview-list-title {
+  font-size: 26px; }
+
+/*# sourceMappingURL=teaser-list.css.map */
diff --git a/assets/scss/teaser-list.scss b/assets/scss/teaser-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4cc884fba179a683d19236f7ded504c4672e802a
--- /dev/null
+++ b/assets/scss/teaser-list.scss
@@ -0,0 +1,7 @@
+.teaser-list{
+  .views-row{
+    .preview-list-title{
+      font-size: 26px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/cern_display_formats.info.yml b/cern_display_formats.info.yml
index 80f1f121144af39f50ead79969dac1d7bd266867..1eebee33b3ca7bc94c58a0b722a3fb3e2c929730 100755
--- a/cern_display_formats.info.yml
+++ b/cern_display_formats.info.yml
@@ -2,8 +2,8 @@ name: CERN Display Formats
 type: module
 description: 'Provides a set of display formats designed for the needs of the CERN users.'
 package: Web Team Drupal Library
-version: 1.0
+version: 1.2.0
 core: '8.x'
 dependencies:
   - drupal:views
-  - cern_components
+  - cern_components (>=8.x-2.4.0)
diff --git a/cern_display_formats.libraries.yml b/cern_display_formats.libraries.yml
new file mode 100644
index 0000000000000000000000000000000000000000..16655f195a3bd8ca7f2aea436727d3d59d644ef5
--- /dev/null
+++ b/cern_display_formats.libraries.yml
@@ -0,0 +1,5 @@
+teaser-list-stylesheets:
+  version: 1.x
+  css:
+    layout:
+      assets/css/teaser-list.css: {}
\ No newline at end of file
diff --git a/cern_display_formats.module b/cern_display_formats.module
index b738cc19afb8216e967a042ebdf657816b74eea0..e624130f9775be92a1d6dff0747819f5dcf89f91 100755
--- a/cern_display_formats.module
+++ b/cern_display_formats.module
@@ -8,7 +8,7 @@ use \Drupal\views\Plugin\views\cache\CachePluginBase;
 /**
  * Implements hook_theme().
  *
- * Sets a theme for horizontal boxes
+ * Sets a theme for each format
  *
  */
 function cern_display_formats_theme($existing, $type, $theme, $path) {
@@ -19,6 +19,16 @@ function cern_display_formats_theme($existing, $type, $theme, $path) {
 				'accordion' => array(
 						'file' => 'display_formats.theme.inc',
 				),
+				'collision' => array(
+						'file' => 'display_formats.theme.inc',
+				),
+				'countdown' => array(
+					'file' => 'display_formats.theme.inc',
+				),
+        'teaser_list' => array(
+            'file' => 'display_formats.theme.inc',
+        ),
+
     );
 }
 
@@ -27,7 +37,14 @@ function cern_display_formats_theme($existing, $type, $theme, $path) {
  * Implements hook_views_post_render().
  */
 function cern_display_formats_views_post_render(ViewExecutable $view, &$output, CachePluginBase $cache) {
-  if ($view->display_handler->view->style_plugin->pluginTitle()->__toString() == "Horizontal Boxes"){
-		$view->display_handler->setOption('css_class','horizontal-boxes');
+	//sets css classes to the view based on selected format
+	if ($view->display_handler->view->style_plugin->getPluginId() == "horizontal_boxes") {
+		$view->display_handler->setOption('css_class', 'horizontal-boxes');
+	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "collision") {
+		$view->display_handler->setOption('css_class', 'events-collision');
+	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "countdown") {
+		$view->display_handler->setOption('css_class', 'events-countdown');
+	} elseif ($view->display_handler->view->style_plugin->getPluginId() == "teaser_list") {
+		$view->display_handler->setOption('css_class', 'teaser-list');
 	}
 }
\ No newline at end of file
diff --git a/display_formats.theme.inc b/display_formats.theme.inc
index a9be067828d2b55c3a0ea02e1233fd8a0e68e77e..c5997d679bc9b26b5c8cc50cbdd8bdbc93953812 100755
--- a/display_formats.theme.inc
+++ b/display_formats.theme.inc
@@ -45,4 +45,48 @@ function template_preprocess_views_view_accordion(&$variables) {
 			$variables['rows'][$id]['attributes']->addClass($row_class);
 		}
 	}
+}
+
+/**
+ * Preprocess function of the Events Collision template.
+ *
+ * @file
+ *
+ */
+function template_preprocess_views_view_collision(&$variables) {
+	$view = $variables['view'];
+	$rows = $variables['rows'];
+	$style = $view->style_plugin;
+	$options = $style->options;
+
+	$variables['default_row_class'] = !empty($options['default_row_class']);
+	foreach ($rows as $id => $row) {
+		$variables['rows'][$id] = [];
+		$variables['rows'][$id]['content'] = $row;
+		$variables['rows'][$id]['attributes'] = new Attribute();
+		if ($row_class = $view->style_plugin->getRowClass($id)) {
+			$variables['rows'][$id]['attributes']->addClass($row_class);
+		}
+	}
+}
+
+/**
+ * @file
+ *
+ */
+function template_preprocess_views_view_teaser_list(&$variables) {
+    $view = $variables['view'];
+    $rows = $variables['rows'];
+    $style = $view->style_plugin;
+    $options = $style->options;
+
+    $variables['default_row_class'] = !empty($options['default_row_class']);
+    foreach ($rows as $id => $row) {
+        $variables['rows'][$id] = [];
+        $variables['rows'][$id]['content'] = $row;
+        $variables['rows'][$id]['attributes'] = new Attribute();
+        if ($row_class = $view->style_plugin->getRowClass($id)) {
+            $variables['rows'][$id]['attributes']->addClass($row_class);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/Plugin/views/style/Collision.php b/src/Plugin/views/style/Collision.php
new file mode 100644
index 0000000000000000000000000000000000000000..80444420c8af8529a5ad440a257fc8168d95a865
--- /dev/null
+++ b/src/Plugin/views/style/Collision.php
@@ -0,0 +1,58 @@
+<?php
+
+
+namespace Drupal\cern_display_formats\Plugin\views\style;
+
+use Drupal\core\form\FormStateInterface;
+use Drupal\views\Plugin\views\style\DefaultStyle;
+use Drupal\views\Plugin\views\style\UnformattedSummary;
+
+/**
+ * Implements the Events collision display format
+ *
+ *
+ * @ingroup views_style_plugins
+ *
+ * @ViewsStyle(
+ * id = "collision",
+ * title = @Translation("Collision"),
+ * help = @Translation("Displays content using the collision efect"),
+ * theme = "views_view_collision",
+ * display_types = {"normal"}
+ * )
+ */
+class Collision extends DefaultStyle {
+
+	protected $usesoptions = true;
+
+
+	/**
+	 * Defines the initial options of the Horizontal Boxes.
+	 *
+	 * @return mixed
+	 */
+	protected function defineOptions(){
+		$options = parent::defineOptions();
+		$options['row_class'] = array('default'=> 'events-collision-row') ;
+		return $options;
+	}
+
+	/**
+	 * Overrides the options form of HB
+	 *
+	 * @param $form
+	 * @param FormStateInterface $form_state
+	 */
+	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+		parent::buildOptionsForm($form, $form_state);
+
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#default_value' => (!empty($this->options['row_class'])) ? $this->options['row_class'] : 'events-collision-row',
+		);
+	}
+
+
+
+}
\ No newline at end of file
diff --git a/src/Plugin/views/style/Countdown.php b/src/Plugin/views/style/Countdown.php
new file mode 100644
index 0000000000000000000000000000000000000000..5159e6d0fd9f54d96e451d7b48df02d8e91cf05c
--- /dev/null
+++ b/src/Plugin/views/style/Countdown.php
@@ -0,0 +1,39 @@
+<?php
+
+
+namespace Drupal\cern_display_formats\Plugin\views\style;
+
+
+use Drupal\views\Plugin\views\style\DefaultStyle;
+
+/**
+ * Implements the Countdown display format
+ *
+ *
+ * @ingroup views_style_plugins
+ *
+ * @ViewsStyle(
+ * id = "countdown",
+ * title = @Translation("Countdown"),
+ * help = @Translation("Displays content using the countdown efect"),
+ * theme = "views_view_unformatted",
+ * display_types = {"normal"}
+ * )
+ */
+class Countdown extends DefaultStyle {
+
+	protected $usesoptions = true;
+
+
+	/**
+	 * Defines the initial options for Countdown format
+	 *
+	 * @return mixed
+	 */
+	protected function defineOptions(){
+		$options = parent::defineOptions();
+		return $options;
+	}
+
+
+}
\ No newline at end of file
diff --git a/src/Plugin/views/style/HorizontalBoxes.php b/src/Plugin/views/style/HorizontalBoxes.php
index 2bc6fa0ad984474f7fa3af5c3d923c61ecded2fa..5c87ca832f280aba2c279e382172980321b34c4e 100755
--- a/src/Plugin/views/style/HorizontalBoxes.php
+++ b/src/Plugin/views/style/HorizontalBoxes.php
@@ -33,14 +33,35 @@ class HorizontalBoxes extends DefaultStyle
 
     protected $usesoptions = true;
 
-
     protected $renderFields = true;
 
+	/**
+	 * Defines the initial options of the Horizontal Boxes.
+	 *
+	 * @return mixed
+	 */
     protected function defineOptions(){
       $options = parent::defineOptions();
-      $options['row_class'] = 'horizontal-boxes-row';
-      $options['default_row_class'] = 'horizontal-boxes-row';
+      $options['row_class'] = array('default'=> 'horizontal-boxes-row') ;
       return $options;
     }
 
-}
\ No newline at end of file
+	/**
+	 * Overrides the options form of HB
+	 *
+	 * @param $form
+	 * @param FormStateInterface $form_state
+	 */
+	public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+		parent::buildOptionsForm($form, $form_state);
+
+		$form['row_class'] = array(
+				'#type' => 'textfield',
+				'#title' => t('Row Class'),
+				'#description' => t('For Horizontal Boxes, make sure you have set horizontal-boxes-row as one of the row classes'),
+				'#default_value' => (!empty($this->options['row_class'])) ? $this->options['row_class'] : 'horizontal-boxes-row',
+		);
+    }
+
+
+	}
\ No newline at end of file
diff --git a/src/Plugin/views/style/TeaserList.php b/src/Plugin/views/style/TeaserList.php
new file mode 100644
index 0000000000000000000000000000000000000000..df1b604a6ddcbd7f14f1d0dfdf1a3799cbc722f3
--- /dev/null
+++ b/src/Plugin/views/style/TeaserList.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Drupal\cern_display_formats\Plugin\views\style;
+
+use Drupal\core\form\FormStateInterface;
+use Drupal\views\Plugin\views\style\DefaultStyle;
+/**
+ * Style plugin rendering as Teaser List
+ *
+ * @ingroup views_style_plugins
+ *
+ * @ViewsStyle(
+ *   id = "teaser_list",
+ *   title = @Translation("Teaser List"),
+ *   help = @Translation("Displays content using the Teaser List style"),
+ *   theme = "views_view_teaser_list",
+ *   display_types = {"normal"}
+ * )
+ */
+class TeaserList extends DefaultStyle
+{
+    /**
+     * {@inheritdoc}
+     */
+    protected $usesRowPlugin = true;
+
+    //the format should not use row classes
+    protected $usesRowClass = true;
+
+
+    protected $usesoptions = true;
+
+    protected function defineOptions(){
+        $options = parent::defineOptions();
+        return $options;
+    }
+
+}
diff --git a/templates/views-view-collision.html.twig b/templates/views-view-collision.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..fce75e1f435efbd9f6ff4b8dd179c26f6f844d7e
--- /dev/null
+++ b/templates/views-view-collision.html.twig
@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Theming template to display Event Collision display format
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+
+
+{% if title %}
+	<h3>{{ title }}</h3>
+{% endif %}
+
+
+{% for row in rows %}
+	{% set row_classes = [default_row_class ? 'views-row col-md-4',] %}
+	{% if loop.first != true and loop.index0  is divisible by(3) %}
+		</div>
+	{% endif %}
+	{% if loop.index0 is divisible by(3) %}
+		<div class="carousel-cern-item row">
+	{% endif %}
+	<div{{ row.attributes.addClass(row_classes) }}>{{ row.content }}</div>
+	{% if loop.last == true %}
+		</div>
+	{% endif %}
+{% endfor %}
+
diff --git a/templates/views-view-horizontal-boxes.html.twig b/templates/views-view-horizontal-boxes.html.twig
index 86c2b25206f5cf9796b3fdd60b9ae76cd2bb2519..956f8c49604c4c78d009b81359b522870017e339 100755
--- a/templates/views-view-horizontal-boxes.html.twig
+++ b/templates/views-view-horizontal-boxes.html.twig
@@ -1,20 +1,18 @@
-{#<div class="horizontal-boxes">#}
 
-    {% if title %}
-        <h3>{{ title }}</h3>
-    {% endif %}
+{% if title %}
+    <h3>{{ title }}</h3>
+{% endif %}
 
-    {% for row in rows %}
-        {% set row_classes = [default_row_class ? 'horizontal-boxes-row views-row col-md-4',] %}
-        {% if loop.first != true and loop.index0  is divisible by(3) %}
-            </div>
-        {% endif %}
-        {% if loop.index0 is divisible by(3) %}
-            <div class="carousel-cern-item row">
-        {% endif %}
-        <div{{ row.attributes.addClass(row_classes) }}>{{ row.content }}</div>
-        {% if loop.last == true %}
-            </div>
-        {% endif %}
-    {% endfor %}
-{#</div>#}
\ No newline at end of file
+{% for row in rows %}
+    {% set row_classes = [default_row_class ? 'horizontal-boxes-row views-row col-md-4',] %}
+    {% if loop.first != true and loop.index0  is divisible by(3) %}
+        </div>
+    {% endif %}
+    {% if loop.index0 is divisible by(3) %}
+        <div class="carousel-cern-item row">
+    {% endif %}
+    <div{{ row.attributes.addClass(row_classes) }}>{{ row.content }}</div>
+    {% if loop.last == true %}
+        </div>
+    {% endif %}
+{% endfor %}
diff --git a/templates/views-view-teaser-list.html.twig b/templates/views-view-teaser-list.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..009de452eb7a0d0f5084e79f2cd50b4a824519f1
--- /dev/null
+++ b/templates/views-view-teaser-list.html.twig
@@ -0,0 +1,35 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{{ attach_library('cern_display_formats/teaser-list-stylesheets') }}
+
+{% if title %}
+    <h3>{{ title }}</h3>
+{% endif %}
+{% for row in rows %}
+    {%
+        set row_classes = [
+        default_row_class ? 'views-row',
+    ]
+    %}
+    <div{{ row.attributes.addClass(row_classes) }}>
+        {{ row.content }}
+    </div>
+{% endfor %}
\ No newline at end of file