diff --git a/package.json b/package.json
index 00c5994c..81be827f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-listing-block",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "@eeacms/volto-listing-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js
index bb74b075..9512ab6d 100644
--- a/src/blocks/Listing/index.js
+++ b/src/blocks/Listing/index.js
@@ -1,4 +1,4 @@
-import { addStyling } from '@plone/volto/helpers';
+// import { addStyling } from '@plone/volto/helpers';
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 import { composeSchema } from '@eeacms/volto-listing-block/schema-utils';
 
@@ -6,7 +6,7 @@ import Carousel from './layout-templates/Carousel';
 import Gallery from './layout-templates/Gallery';
 import Listing from './layout-templates/Listing';
 import {
-  setBasicStylingSchema,
+  // setBasicStylingSchema,
   setCardStylingSchema,
   setCardModelSchema,
   setItemModelSchema,
@@ -52,8 +52,8 @@ const applyConfig = (config) => {
       title: 'Listing',
       template: Listing,
       schemaEnhancer: composeSchema(
-        addStyling,
-        setBasicStylingSchema,
+        // addStyling,
+        // setBasicStylingSchema,
         UniversalCard.schemaEnhancer,
       ),
     },
@@ -63,8 +63,8 @@ const applyConfig = (config) => {
       title: 'Carousel',
       template: Carousel,
       schemaEnhancer: composeSchema(
-        addStyling,
-        setBasicStylingSchema,
+        // addStyling,
+        // setBasicStylingSchema,
         UniversalCard.schemaEnhancer,
         Carousel.schemaEnhancer,
       ),
@@ -75,8 +75,8 @@ const applyConfig = (config) => {
       title: 'Gallery',
       template: Gallery,
       schemaEnhancer: composeSchema(
-        addStyling,
-        setBasicStylingSchema,
+        // addStyling,
+        // setBasicStylingSchema,
         UniversalCard.schemaEnhancer,
         Gallery.schemaEnhancer,
       ),
diff --git a/src/blocks/Listing/item-templates/CardTemplates.jsx b/src/blocks/Listing/item-templates/CardTemplates.jsx
index 34ca921a..d389c69b 100644
--- a/src/blocks/Listing/item-templates/CardTemplates.jsx
+++ b/src/blocks/Listing/item-templates/CardTemplates.jsx
@@ -16,6 +16,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 
diff --git a/src/blocks/Listing/item-templates/ItemTemplates.jsx b/src/blocks/Listing/item-templates/ItemTemplates.jsx
index 741dd3fa..b1b31f3e 100644
--- a/src/blocks/Listing/item-templates/ItemTemplates.jsx
+++ b/src/blocks/Listing/item-templates/ItemTemplates.jsx
@@ -12,6 +12,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 
diff --git a/src/blocks/Listing/item-templates/SearchItemTemplate.jsx b/src/blocks/Listing/item-templates/SearchItemTemplate.jsx
index 5637bb99..d6680a05 100644
--- a/src/blocks/Listing/item-templates/SearchItemTemplate.jsx
+++ b/src/blocks/Listing/item-templates/SearchItemTemplate.jsx
@@ -20,6 +20,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 
diff --git a/src/blocks/Listing/layout-templates/Carousel.jsx b/src/blocks/Listing/layout-templates/Carousel.jsx
index 0289de7d..eed15f09 100644
--- a/src/blocks/Listing/layout-templates/Carousel.jsx
+++ b/src/blocks/Listing/layout-templates/Carousel.jsx
@@ -2,6 +2,9 @@ import React from 'react';
 import { Button, Icon } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer';
 
diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js
index 37ea9169..74d66f69 100644
--- a/src/blocks/Listing/schema.js
+++ b/src/blocks/Listing/schema.js
@@ -4,47 +4,47 @@ import alignLeftSVG from '@plone/volto/icons/align-left.svg';
 import alignCenterSVG from '@plone/volto/icons/align-center.svg';
 
 const ALIGN_INFO_MAP = {
-  align_left: [alignLeftSVG, 'Left'],
-  align_center: [alignCenterSVG, 'Center'],
+  left: [alignLeftSVG, 'Left'],
+  center: [alignCenterSVG, 'Center'],
 };
 
-export const setBasicStylingSchema = (args) => {
-  const { schema, intl } = args;
-  schema.properties.styles.schema = {
-    fieldsets: [
-      {
-        id: 'styling',
-        title: 'Styling',
-        fields: ['theme', 'inverted', 'rounded'],
-      },
-    ],
-    properties: {
-      theme: {
-        title: intl.formatMessage(messages.Theme),
-        description: intl.formatMessage(messages.ThemeHelp),
-        choices: [
-          ['', intl.formatMessage(messages.ThemeDefault)],
-          ['primary', intl.formatMessage(messages.ThemePrimary)],
-          ['secondary', intl.formatMessage(messages.ThemeSecondary)],
-          ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
-        ],
-      },
-      inverted: {
-        title: intl.formatMessage(messages.Inverted),
-        description: intl.formatMessage(messages.InvertedHelp),
-        type: 'boolean',
-      },
-      rounded: {
-        title: intl.formatMessage(messages.Rounded),
-        description: intl.formatMessage(messages.RoundedHelp),
-        type: 'boolean',
-      },
-    },
-    required: [],
-  };
+// export const setBasicStylingSchema = (args) => {
+//   const { schema, intl } = args;
+//   schema.properties.styles.schema = {
+//     fieldsets: [
+//       {
+//         id: 'styling',
+//         title: 'Styling',
+//         fields: ['theme', 'inverted', 'rounded'],
+//       },
+//     ],
+//     properties: {
+//       theme: {
+//         title: intl.formatMessage(messages.Theme),
+//         description: intl.formatMessage(messages.ThemeHelp),
+//         choices: [
+//           ['', intl.formatMessage(messages.ThemeDefault)],
+//           ['primary', intl.formatMessage(messages.ThemePrimary)],
+//           ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+//           ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+//         ],
+//       },
+//       inverted: {
+//         title: intl.formatMessage(messages.Inverted),
+//         description: intl.formatMessage(messages.InvertedHelp),
+//         type: 'boolean',
+//       },
+//       rounded: {
+//         title: intl.formatMessage(messages.Rounded),
+//         description: intl.formatMessage(messages.RoundedHelp),
+//         type: 'boolean',
+//       },
+//     },
+//     required: [],
+//   };
 
-  return schema;
-};
+//   return schema;
+// };
 
 const CallToActionSchema = ({ formData }) => {
   return {
@@ -98,6 +98,7 @@ export const setCardModelSchema = (args) => {
   const itemModelSchema = schema.properties.itemModel.schema;
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
+    'maxTitle',
     'hasDate',
     'hasDescription',
     ...(formData?.itemModel?.hasDescription ? ['maxDescription'] : []),
@@ -116,6 +117,15 @@ export const setCardModelSchema = (args) => {
       title: 'Description',
       type: 'boolean',
     },
+    maxTitle: {
+      title: 'Title max lines',
+      description:
+        "Limit title to a maximum number of lines by adding trailing '...'",
+      type: 'number',
+      default: 2,
+      minimum: 0,
+      maximum: 5,
+    },
     maxDescription: {
       title: 'Description max lines',
       description:
@@ -153,6 +163,7 @@ export const setItemModelSchema = (args) => {
 
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
+    'maxTitle',
     'hasDate',
     'hasDescription',
     'maxDescription',
@@ -175,6 +186,15 @@ export const setItemModelSchema = (args) => {
       type: 'boolean',
       default: true,
     },
+    maxTitle: {
+      title: 'Title max lines',
+      description:
+        "Limit title to a maximum number of lines by adding trailing '...'",
+      type: 'number',
+      default: 2,
+      minimum: 0,
+      maximum: 5,
+    },
     maxDescription: {
       title: 'Description max lines',
       description:
@@ -214,7 +234,7 @@ export const setCardStylingSchema = ({ schema, intl }) => {
   const itemModelSchema = schema.properties.itemModel;
   const styleSchema = itemModelSchema.schema.properties.styles.schema;
   const fieldset = styleSchema.fieldsets.find(({ id }) => id === 'default');
-  fieldset.fields.push('theme', 'inverted', 'rounded', 'text_align');
+  fieldset.fields.push('theme', 'inverted', 'rounded', 'text');
   styleSchema.properties = {
     ...styleSchema.properties,
     theme: {
@@ -237,7 +257,7 @@ export const setCardStylingSchema = ({ schema, intl }) => {
       description: intl.formatMessage(messages.RoundedHelp),
       type: 'boolean',
     },
-    text_align: {
+    text: {
       title: 'Text align',
       widget: 'style_text_align',
       actions: Object.keys(ALIGN_INFO_MAP),
diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js
index 81aa1082..48cc5994 100644
--- a/src/blocks/Teaser/index.js
+++ b/src/blocks/Teaser/index.js
@@ -1,17 +1,17 @@
 import { composeSchema } from '@eeacms/volto-listing-block/schema-utils';
-import { addStyling } from '@plone/volto/helpers';
+// import { addStyling } from '@plone/volto/helpers';
 
 import TeaserCardTemplate from './Card';
 import { adjustTeaserSchema } from './schema';
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
-import { setBasicStylingSchema } from '../Listing/schema';
+// import { setBasicStylingSchema } from '../Listing/schema';
 
 export default (config) => {
   if (config.blocks.blocksConfig.teaser) {
     config.blocks.blocksConfig.teaser.schemaEnhancer = composeSchema(
       config.blocks.blocksConfig.teaser.schemaEnhancer,
-      addStyling,
-      setBasicStylingSchema,
+      // addStyling,
+      // setBasicStylingSchema,
     );
 
     config.blocks.blocksConfig.teaser.variations = [
diff --git a/src/components/UniversalCard/fragments/CardMeta.jsx b/src/components/UniversalCard/fragments/CardMeta.jsx
index 4968ca73..e5a70160 100644
--- a/src/components/UniversalCard/fragments/CardMeta.jsx
+++ b/src/components/UniversalCard/fragments/CardMeta.jsx
@@ -9,18 +9,19 @@ const CardMeta = (props) => {
   const locale = config.settings.dateLocale || 'en-gb';
   const showDate = itemModel.hasDate !== false && EffectiveDate !== 'None';
   const showMeta = !!(head_title || (itemModel?.hasMetaType && item['@type']));
-  const show = showDate || showMeta;
+  // const show = showDate || showMeta;
 
   // TODO: <EEAFormattedDate data={EffectiveDate} />
 
-  return show ? (
+  return (
     <UiCard.Meta>
       {showMeta && (
         <span className="text-left">{head_title || item['Type']}</span>
       )}
-      {showDate && (
-        <span className="text-right date">
-          {formatDate({
+
+      <span className="text-right date">
+        {showDate &&
+          formatDate({
             date: EffectiveDate,
             format: {
               year: 'numeric',
@@ -29,10 +30,9 @@ const CardMeta = (props) => {
             },
             locale: locale,
           })}
-        </span>
-      )}
+      </span>
     </UiCard.Meta>
-  ) : null;
+  );
 };
 
 export default CardMeta;
diff --git a/src/less/listing-cards.less b/src/less/listing-cards.less
index bc7101c5..e98ddef9 100644
--- a/src/less/listing-cards.less
+++ b/src/less/listing-cards.less
@@ -6,12 +6,33 @@
 
 @import (multiple, reference, optional) '../../theme.config';
 
-.category {
-  font-size: @categoryFontSize;
+each(range(5), {
+  .max-@{value}-lines {
+    --max-lines: @value;
+  }
+  .title-max-@{value}-lines {
+    --title-max-lines: @value;
+  }
+});
+
+.useMaxLines(@value: 5) {
+  display: -webkit-box !important;
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines, @value);
 }
 
-.description {
-  font-size: 14px;
+.useTitleMaxLines(@value: 5) {
+  display: -webkit-box !important;
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--title-max-lines, @value);
+}
+
+.category {
+  font-size: @categoryFontSize;
 }
 
 .ui.cards > .card,
@@ -42,24 +63,14 @@
   font-size: 12px;
 }
 
-each(range(5), {
-  .max-@{value}-lines {
-    --max-lines: @value;
-  }
-});
-
-.useMaxLines() {
-  display: -webkit-box;
-  overflow: hidden;
-
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--max-lines, 5);
-}
-
 .u-item {
   .listing-description {
     .useMaxLines();
   }
+
+  .listing-header {
+    .useTitleMaxLines();
+  }
 }
 
 // over specific due to blocks.less override
@@ -96,8 +107,7 @@ each(range(5), {
 }
 
 // listing theme styling alongside inverse options
-
-.listing-item {
+.listing-item:not(.has--rounded--true) {
   --image-max-width: 350px;
   --image-max-height: 210px;
 }
@@ -153,23 +163,29 @@ each(range(5), {
   color: var(--text-color, @tertiaryColor);
 }
 
-.left-image {
+.listing-body {
+  flex: 1;
+}
+
+.listing-item:not(.has--rounded--true) {
   .listing-body {
     flex: 1;
   }
 
-  .image-wrapper {
+  .left-image .image-wrapper {
     margin-right: 24px;
+  }
 
-    .ui.image {
-      width: 100%;
-      margin-right: auto;
-      object-fit: cover;
-    }
+  .ui.image {
+    width: 100%;
+    margin-right: auto;
+    object-fit: cover;
   }
 }
 
 .right-image {
+  width: 100%;
+
   .image-wrapper {
     margin-right: 0;
     margin-left: 24px;
@@ -183,15 +199,21 @@ each(range(5), {
 .u-item.listing-item {
   padding: var(--theme-padding, 32px 1rem);
   margin: 0;
+  background-color: var(--bg-color, #fff);
+  color: var(--text-color, @tertiaryColor);
 }
 
 .ui.card.u-card {
-  .description {
-    display: -webkit-box;
-    overflow: hidden;
+  .meta:after {
+    content: '\200b';
+  }
+
+  .header {
+    .useTitleMaxLines();
+  }
 
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--max-lines, 5);
+  .description {
+    .useMaxLines();
   }
 
   &.left-image-card {