diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts
new file mode 100644
index 0000000000..ff0011855c
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.stories.ts
@@ -0,0 +1,61 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import { CardViewArrayItemModel, CardViewModule } from '../../public-api';
+import { of } from 'rxjs';
+
+export default {
+    component: CardViewArrayItemComponent,
+    title: 'Core/Card View/Card View Array Item',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        property: {
+            description: 'Card View Item Model with data',
+            table: {
+                type: { summary: 'CardViewArrayItemModel' }
+            }
+        }
+    }
+} as Meta;
+
+export const CardViewArrayItem: Story<CardViewArrayItemComponent> = (
+    args: CardViewArrayItemComponent
+) => ({
+    props: args
+});
+CardViewArrayItem.args = {
+    property: new CardViewArrayItemModel({
+        label: 'CardView Array of items',
+        value: of([
+            { icon: 'directions_bike', value: 'Zlatan' },
+            { icon: 'directions_bike', value: 'Lionel Messi' },
+            { value: 'Mohamed', directions_bike: 'save' },
+            { value: 'Ronaldo' }
+        ]),
+        key: 'array',
+        icon: 'edit',
+        default: 'Empty',
+        noOfItemsToDisplay: 2
+    })
+};
diff --git a/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts
new file mode 100644
index 0000000000..adbfe69845
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.stories.ts
@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewBoolItemComponent } from './card-view-boolitem.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import { CardViewBoolItemModel, CardViewModule } from '../../public-api';
+
+export default {
+    component: CardViewBoolItemComponent,
+    title: 'Core/Card View/Card View Bool Item',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        editable: {
+            control: 'boolean',
+            description: 'Defines if CardView item is editable',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' }
+            }
+        },
+        property: {
+            description: 'Card View Item Model with data',
+            table: {
+                type: { summary: 'CardViewBoolItemModel' }
+            }
+        }
+    }
+} as Meta;
+
+export const CardViewBoolItem: Story<CardViewBoolItemComponent> = (
+    args: CardViewBoolItemComponent
+) => ({
+    props: args
+});
+CardViewBoolItem.args = {
+    property: new CardViewBoolItemModel({
+        label: 'Agree to all terms and conditions',
+        value: true,
+        key: 'boolean',
+        default: false,
+        editable: true
+    })
+};
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts
new file mode 100644
index 0000000000..797ae8e9dd
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.stories.ts
@@ -0,0 +1,133 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewDateItemComponent } from './card-view-dateitem.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import {
+    CardViewDateItemModel,
+    CardViewDatetimeItemModel,
+    CardViewModule
+} from '../../public-api';
+
+export default {
+    component: CardViewDateItemComponent,
+    title: 'Core/Card View/Card View Date Item',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        editable: {
+            control: 'boolean',
+            description: 'Defines if CardView item is editable',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false }
+            }
+        },
+        displayEmpty: {
+            control: 'boolean',
+            description:
+                'Defines if it should display CardView item when data is empty',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        displayClearAction: {
+            control: 'boolean',
+            description:
+                'Defines if it should display clear input action (only with SingleValued components)',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        property: {
+            description: 'Card View Item Model with data',
+            table: {
+                type: {
+                    summary:
+                        'CardViewDateItemModel | CardViewDatetimeItemModel'
+                }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story = (args) => ({
+    props: args
+});
+
+export const SingleValuedDateItemCardView = template.bind({});
+
+SingleValuedDateItemCardView.args = {
+    property: new CardViewDateItemModel({
+        label: 'CardView Date Item',
+        value: [new Date(1983, 11, 24, 10, 0, 30)],
+        key: 'date',
+        default: new Date(1983, 11, 24, 10, 0, 30),
+        format: 'shortDate',
+        editable: true
+    })
+};
+
+export const MultiValuedDateItemCardView = template.bind({});
+
+MultiValuedDateItemCardView.args = {
+    property: new CardViewDateItemModel({
+        label: 'CardView Date Item - Multivalue (chips)',
+        value: [new Date(1983, 11, 24, 10, 0, 30)],
+        key: 'date',
+        default: new Date(1983, 11, 24, 10, 0, 30),
+        format: 'shortDate',
+        editable: true,
+        multivalued: true
+    })
+};
+
+export const SingleValuedDatetimeItemCardView = template.bind({});
+
+SingleValuedDatetimeItemCardView.args = {
+    property: new CardViewDatetimeItemModel({
+        label: 'CardView Datetime Item',
+        value: undefined,
+        key: 'datetime',
+        default: undefined,
+        format: 'short',
+        editable: true
+    })
+};
+
+export const MultiValuedDatetimeItemCardView = template.bind({});
+
+MultiValuedDatetimeItemCardView.args = {
+    property: new CardViewDatetimeItemModel({
+        label: 'CardView Datetime Item - Multivalue (chips)',
+        value: undefined,
+        key: 'datetime',
+        default: undefined,
+        format: 'short',
+        editable: true,
+        multivalued: true
+    })
+};
diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts
new file mode 100644
index 0000000000..ba99afff4b
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.stories.ts
@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewKeyValuePairsItemComponent } from './card-view-keyvaluepairsitem.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import { CardViewModule, CardViewKeyValuePairsItemModel } from '../../public-api';
+
+export default {
+    component: CardViewKeyValuePairsItemComponent,
+    title: 'Core/Card View/Card View Key Value Pairs Item',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        editable: {
+            control: 'boolean',
+            description: 'Defines if CardView item is editable',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false }
+            }
+        },
+        property: {
+            description: 'Card View Item Model with data',
+            table: {
+                type: { summary: 'CardViewKeyValuePairsItemModel' }
+            }
+        }
+    }
+} as Meta;
+
+export const CardViewKeyValuePairsItem: Story<CardViewKeyValuePairsItemComponent> =
+    (args: CardViewKeyValuePairsItemComponent) => ({
+        props: args
+    });
+CardViewKeyValuePairsItem.args = {
+    property: new CardViewKeyValuePairsItemModel({
+        label: 'CardView Key-Value Pairs Item',
+        value: [
+            { name: 'hey', value: 'you' },
+            { name: 'hey', value: 'you' }
+        ],
+        key: 'key-value-pairs',
+        editable: true
+    })
+};
diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts
index 1913c9949c..4cfeace997 100644
--- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts
+++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts
@@ -23,7 +23,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { BaseCardView } from '../base-card-view';
 
 @Component({
-    selector: 'adf-card-view-boolitem',
+    selector: 'adf-card-view-keyvaluepairsitem',
     templateUrl: './card-view-keyvaluepairsitem.component.html',
     styleUrls: ['./card-view-keyvaluepairsitem.component.scss'],
     encapsulation: ViewEncapsulation.None
diff --git a/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts
new file mode 100644
index 0000000000..d0f9b32d81
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.stories.ts
@@ -0,0 +1,77 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewMapItemComponent } from './card-view-mapitem.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import { CardViewMapItemModel, CardViewModule } from '../../public-api';
+
+export default {
+    component: CardViewMapItemComponent,
+    title: 'Core/Card View/Card View Map Item',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        displayEmpty: {
+            control: 'boolean',
+            description:
+                'Defines if it should display CardView item when data is empty',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        property: {
+            description: 'Card View Item Model with data',
+            table: {
+                type: { summary: 'CardViewMapItemModel' }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<CardViewMapItemComponent> = (
+    args: CardViewMapItemComponent
+) => ({
+    props: args
+});
+
+export const CardViewMapItem = template.bind({});
+
+CardViewMapItem.args = {
+    property: new CardViewMapItemModel({
+        label: 'My map',
+        value: new Map([['999', 'My Value']]),
+        key: 'map',
+        default: 'default map value'
+    })
+};
+
+export const EmptyCardViewMapItem = template.bind({});
+
+EmptyCardViewMapItem.args = {
+    property: new CardViewMapItemModel({
+        label: 'My map',
+        value: [],
+        key: 'map',
+        default: 'default map value'
+    })
+};
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts
new file mode 100644
index 0000000000..965104d15a
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.stories.ts
@@ -0,0 +1,99 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewSelectItemComponent } from './card-view-selectitem.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import { CardViewSelectItemModel, CardViewModule } from '../../public-api';
+import { of } from 'rxjs';
+
+export default {
+    component: CardViewSelectItemComponent,
+    title: 'Core/Card View/Card View Select Item',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        editable: {
+            control: 'boolean',
+            description: 'Defines if CardView item is editable',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false }
+            }
+        },
+        displayNoneOption: {
+            control: 'boolean',
+            description: 'Shows None option inside select element',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        displayEmpty: {
+            control: 'boolean',
+            description:
+                'Defines if it should display CardView item when data is empty',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        options$: {
+            control: { disable: true },
+            description: 'Data displayed in select element',
+            table: {
+                type: {
+                    summary:
+                        'Observable<CardViewSelectItemOption<string | number>[]>'
+                }
+            }
+        },
+        property: {
+            description: 'Card View Item Model with data',
+            table: {
+                type: { summary: 'CardViewSelectItemModel' }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<CardViewSelectItemComponent> = (
+    args: CardViewSelectItemComponent
+) => ({
+    props: args
+});
+
+export const CardViewSelectItem = template.bind({});
+
+CardViewSelectItem.args = {
+    property: new CardViewSelectItemModel({
+        label: 'CardView Select Item',
+        value: 'one',
+        options$: of([
+            { key: 'one', label: 'One' },
+            { key: 'two', label: 'Two' }
+        ]),
+        key: 'select',
+        editable: true
+    })
+};
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
new file mode 100644
index 0000000000..a5e2e2c8a5
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
@@ -0,0 +1,145 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewTextItemComponent } from './card-view-textitem.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import { CardViewModule, CardViewTextItemModel } from '../../public-api';
+
+export default {
+    component: CardViewTextItemComponent,
+    title: 'Core/Card View/Card View Text Item',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        editable: {
+            control: 'boolean',
+            description: 'Defines if CardView item is editable',
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false }
+            }
+        },
+        displayEmpty: {
+            control: 'boolean',
+            description:
+                'Defines if it should display CardView item when data is empty',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        copyToClipboardAction: {
+            control: 'boolean',
+            description:
+                'Copy to clipboard action - default template in editable mode',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        useChipsForMultiValueProperty: {
+            control: 'boolean',
+            description: 'Split text for chips using defined separator',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        multiValueSeparator: {
+            control: 'text',
+            description: 'Separator used for text splitting',
+            defaultValue: ', ',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: ', ' }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<CardViewTextItemComponent> = (
+    args: CardViewTextItemComponent
+) => ({
+    props: args
+});
+
+export const ClickableCardViewTextItem = template.bind({});
+
+ClickableCardViewTextItem.args = {
+    property: new CardViewTextItemModel({
+        label: 'CardView Text Item - Clickable template',
+        value: 'click here',
+        key: 'click',
+        default: 'click here',
+        editable: true,
+        clickable: true,
+        icon: 'close'
+    })
+};
+
+export const ChipsCardViewTextItem = template.bind({});
+
+ChipsCardViewTextItem.args = {
+    property: new CardViewTextItemModel({
+        label: 'CardView Text Item - Chips template',
+        value: [1, 2, 3, 4],
+        key: 'name',
+        default: 'default bar',
+        multiline: true,
+        multivalued: true,
+        icon: 'icon',
+        editable: true
+    })
+};
+
+export const EmptyCardViewTextItem = template.bind({});
+
+EmptyCardViewTextItem.args = {
+    property: new CardViewTextItemModel({
+        label: 'CardView Text Item - Empty template',
+        value: undefined,
+        key: 'empty',
+        default: '',
+        icon: 'icon',
+        editable: false
+    }),
+    editable: false,
+    displayEmpty: false
+};
+
+export const DefaultCardViewTextItem = template.bind({});
+
+DefaultCardViewTextItem.args = {
+    property: new CardViewTextItemModel({
+        label: 'CardView Text Item - Default template',
+        value: 'input here',
+        key: 'default',
+        default: 'input here',
+        editable: true,
+        clickable: false,
+        icon: 'close',
+        multiline: false
+    })
+};
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 69c43633a8..a097cd74f7 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -186,7 +186,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     }
 
     copyToClipboard(valueToCopy: string) {
-        if (this.copyToClipboard) {
+        if (this.copyToClipboardAction) {
             const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
             this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
         }
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts b/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
new file mode 100644
index 0000000000..9c7111eab0
--- /dev/null
+++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
@@ -0,0 +1,77 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CardViewComponent } from './card-view.component';
+import { CoreStoryModule } from './../../../testing/core.story.module';
+import { CardViewModule } from '../../public-api';
+import { cardViewDataSource, cardViewUndefinedValues } from '../../mock/card-view-content.mock';
+
+export default {
+    component: CardViewComponent,
+    title: 'Core/Card View/Card View',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CardViewModule]
+        })
+    ],
+    argTypes: {
+        editable: {
+            control: 'boolean',
+            defaultValue: true
+        },
+        displayEmpty: {
+            control: 'boolean',
+            defaultValue: true
+        },
+        displayNoneOption: {
+            control: 'boolean',
+            defaultValue: true
+        },
+        displayClearAction: {
+            control: 'boolean',
+            defaultValue: true
+        },
+        copyToClipboardAction: {
+            control: 'boolean',
+            defaultValue: true
+        },
+        useChipsForMultiValueProperty: {
+            control: 'boolean',
+            defaultValue: true
+        },
+        multiValueSeparator: {
+            control: 'text',
+            defaultValue: ', '
+        }
+    }
+} as Meta;
+
+const template: Story<CardViewComponent> = (args: CardViewComponent) => ({
+    props: args
+});
+
+export const defaultStory = template.bind({});
+defaultStory.args = {
+    properties: cardViewDataSource
+};
+
+export const emptyStory = template.bind({});
+emptyStory.args = {
+    properties: cardViewUndefinedValues,
+    editable: false
+};
diff --git a/lib/core/src/lib/card-view/mock/card-view-content.mock.ts b/lib/core/src/lib/card-view/mock/card-view-content.mock.ts
new file mode 100644
index 0000000000..9e7198a537
--- /dev/null
+++ b/lib/core/src/lib/card-view/mock/card-view-content.mock.ts
@@ -0,0 +1,185 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    CardViewArrayItemModel,
+    CardViewBoolItemModel,
+    CardViewDateItemModel,
+    CardViewDatetimeItemModel,
+    CardViewIntItemModel,
+    CardViewKeyValuePairsItemModel,
+    CardViewMapItemModel,
+    CardViewSelectItemModel,
+    CardViewTextItemModel
+} from '../public-api';
+import { of } from 'rxjs';
+
+export const cardViewDataSource = [
+    new CardViewTextItemModel({
+        label: 'CardView Text Item - Multivalue (chips)',
+        value: [1, 2, 3, 4],
+        key: 'name',
+        default: 'default bar',
+        multiline: true,
+        multivalued: true,
+        icon: 'icon',
+        editable: true
+    }),
+    new CardViewDateItemModel({
+        label: 'CardView Date Item - Multivalue (chips)',
+        value: [new Date(1983, 11, 24, 10, 0, 30)],
+        key: 'date',
+        default: new Date(1983, 11, 24, 10, 0, 30),
+        format: 'shortDate',
+        editable: true,
+        multivalued: true
+    }),
+    new CardViewDatetimeItemModel({
+        label: 'CardView Datetime Item - Multivalue (chips)',
+        value: [new Date(1983, 11, 24, 10, 0, 0)],
+        key: 'datetime',
+        default: new Date(1983, 11, 24, 10, 0, 0),
+        format: 'short',
+        editable: true,
+        multivalued: true
+    }),
+    new CardViewBoolItemModel({
+        label: 'Agree to all terms and conditions',
+        value: true,
+        key: 'boolean',
+        default: false,
+        editable: true
+    }),
+    new CardViewIntItemModel({
+        label: 'CardView Int Item',
+        value: 213,
+        key: 'int',
+        default: 1,
+        editable: true
+    }),
+    new CardViewKeyValuePairsItemModel({
+        label: 'CardView Key-Value Pairs Item',
+        value: [
+            { name: 'hey', value: 'you' },
+            { name: 'hey', value: 'you' }
+        ],
+        key: 'key-value-pairs',
+        editable: true
+    }),
+    new CardViewSelectItemModel({
+        label: 'CardView Select Item',
+        value: 'one',
+        options$: of([
+            { key: 'one', label: 'One' },
+            { key: 'two', label: 'Two' }
+        ]),
+        key: 'select',
+        editable: true
+    }),
+    new CardViewMapItemModel({
+        label: 'My map',
+        value: new Map([['999', 'My Value']]),
+        key: 'map',
+        default: 'default map value'
+    }),
+    new CardViewTextItemModel({
+        label: 'This is clickable ',
+        value: 'click here',
+        key: 'click',
+        default: 'click here',
+        editable: true,
+        clickable: true,
+        icon: 'close'
+    }),
+    new CardViewArrayItemModel({
+        label: 'CardView Array of items',
+        value: of([
+            { icon: 'directions_bike', value: 'Zlatan' },
+            { icon: 'directions_bike', value: 'Lionel Messi' },
+            { value: 'Mohamed', directions_bike: 'save' },
+            { value: 'Ronaldo' }
+        ]),
+        key: 'array',
+        icon: 'edit',
+        default: 'Empty',
+        noOfItemsToDisplay: 2,
+        editable: true
+    })
+];
+
+export const cardViewUndefinedValues = [
+    new CardViewTextItemModel({
+        label: 'CardView Text Item - Multivalue (chips)',
+        value: undefined,
+        key: 'name',
+        default: undefined,
+        multiline: true,
+        multivalued: true,
+        icon: 'icon',
+        editable: true
+    }),
+    new CardViewDateItemModel({
+        label: 'CardView Date Item - Multivalue (chips)',
+        value: undefined,
+        key: 'date',
+        default: undefined,
+        format: 'shortDate',
+        editable: true,
+        multivalued: true
+    }),
+    new CardViewDatetimeItemModel({
+        label: 'CardView Datetime Item - Multivalue (chips)',
+        value: undefined,
+        key: 'datetime',
+        default: undefined,
+        format: 'short',
+        editable: true,
+        multivalued: true
+    }),
+    new CardViewIntItemModel({
+        label: 'CardView Int Item',
+        value: undefined,
+        key: 'int',
+        default: undefined,
+        editable: true
+    }),
+    new CardViewSelectItemModel({
+        label: 'CardView Select Item',
+        value: undefined,
+        options$: of([
+            { key: 'one', label: 'One' },
+            { key: 'two', label: 'Two' }
+        ]),
+        key: 'select',
+        editable: true
+    }),
+    new CardViewMapItemModel({
+        label: 'My map',
+        value: undefined,
+        key: 'map',
+        default: undefined
+    }),
+    new CardViewTextItemModel({
+        label: 'This is clickable ',
+        value: undefined,
+        key: 'click',
+        default: undefined,
+        editable: true,
+        clickable: true,
+        icon: 'close'
+    })
+];