diff --git a/l10n/messages.pot b/l10n/messages.pot
index f2d6ca996a..51525ac442 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -62,9 +62,15 @@ msgstr ""
 msgid "Go back to the list"
 msgstr ""
 
+msgid "items"
+msgstr ""
+
 msgid "Message limit of {count} characters reached"
 msgstr ""
 
+msgid "More {what} …"
+msgstr ""
+
 msgid "Next"
 msgstr ""
 
diff --git a/src/components/DashboardWidget/DashboardWidget.vue b/src/components/DashboardWidget/DashboardWidget.vue
new file mode 100644
index 0000000000..d3471b7d6e
--- /dev/null
+++ b/src/components/DashboardWidget/DashboardWidget.vue
@@ -0,0 +1,387 @@
+<!--
+ - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>
+ -
+ - @author Julien Veyssier <eneiluj@posteo.net>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+<docs>
+
+## Usage
+
+### Simplest example with custom item
+```vue
+<template>
+	<DashboardWidget :items="items">
+		<template #default="{ item }">
+			{{ item.title }}
+		</template>
+	</DashboardWidget>
+</template>
+
+<script>
+const myItems = [
+	{
+		title: 'first',
+		content: 'blabla',
+	},
+	{
+		title: 'second',
+		content: 'fuzzfuzz',
+	},
+]
+export default {
+	name: 'MyDashboardWidget',
+	props: [],
+	data() {
+		return {
+			items: myItems
+		}
+	},
+}
+</script>
+```
+
+### Complete example using DashboardWidgetItem
+
+```vue
+<template>
+	<DashboardWidget :items="items"
+		:show-more-url="'https://nextcloud.com'"
+		:item-menu="itemMenu"
+		@hide="onHide"
+		@markDone="onMarkDone">
+
+		<template #empty-content>
+			Nothing to display
+		</template>
+	</DashboardWidget>
+</template>
+
+<script>
+const myItems = [
+	{
+		id: '1',
+		targetUrl: 'https://target.org',
+		avatarUrl: 'https://avatar.url/img.png',
+		avatarUsername: 'Robert',
+		avatarIsNoUser: true,
+		overlayIconUrl: '/svg/core/actions/sound?color=000',
+		mainText: 'First item text',
+		subText: 'First item subtext',
+	},
+	{
+		id: '2',
+		targetUrl: 'https://other-target.org',
+		avatarUrl: 'https://other-avatar.url/img.png',
+		overlayIconUrl: '/svg/core/actions/add?color=000',
+		mainText: 'Second item text',
+		subText: 'Second item subtext',
+	},
+]
+const myItemMenu = {
+	// triggers an event named "markDone" when clicked
+	'markDone': {
+		text: 'Mark as done',
+		icon: 'icon-checkmark',
+	},
+	// triggers an event named "hide" when clicked
+	'hide': {
+		text: 'Hide',
+		icon: 'icon-toggle',
+	}
+}
+export default {
+	name: 'MyDashboardWidget',
+	props: [],
+	data() {
+		return {
+			items: myItems,
+			itemMenu: myItemMenu,
+			loading: true,
+		}
+	},
+	methods: {
+		onMoreClick() {
+			console.log('more clicked')
+			const win = window.open('https://wherever.you.want', '_blank')
+			win.focus()
+		},
+		onHide(item) {
+			console.log('user wants to hide item ' + item.id)
+			// do what you want
+		},
+		onMarkDone(item) {
+			console.log('user wants to mark item ' + item.id + ' as done')
+			// do what you want
+		},
+	},
+}
+</script>
+```
+
+</docs>
+
+<template>
+	<div>
+		<!-- This element is shown if we have items, but want to show a general message as well.
+		Can be used e.g. to show "No mentions" on top of the item list. -->
+		<EmptyContent v-if="showHalfEmptyContentArea"
+			class="half-screen"
+			:icon="halfEmptyContentIcon">
+			<template #desc>
+				{{ halfEmptyContentString }}
+			</template>
+		</EmptyContent>
+		<!-- The list of items to show. -->
+		<ul>
+			<li v-for="item in displayedItems" :key="item.id">
+				<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->
+				<slot name="default" :item="item">
+					<DashboardWidgetItem v-bind="item"
+						:item-menu="itemMenu"
+						v-on="handlers" />
+				</slot>
+			</li>
+		</ul>
+		<!-- While the widget is loading, we show a list of placeholder items. -->
+		<div v-if="loading">
+			<div v-for="i in 7" :key="i" class="item-list__entry">
+				<Avatar class="item-avatar" :size="44" />
+				<div class="item__details">
+					<h3>&nbsp;</h3>
+					<p class="message">
+&nbsp;
+					</p>
+				</div>
+			</div>
+		</div>
+		<!-- @slot Slot for showing information in case of an empty item list. -->
+		<slot v-else-if="items.length === 0" name="empty-content">
+			<EmptyContent v-if="emptyContentMessage"
+				:icon="emptyContentIcon">
+				<template #desc>
+					{{ emptyContentMessage }}
+				</template>
+			</EmptyContent>
+		</slot>
+		<!-- A "show more" link, e.g. to navigate to the main app belonging to this widget. -->
+		<a v-else-if="showMore"
+			:href="showMoreUrl"
+			target="_blank"
+			class="more"
+			tabindex="0">
+			{{ showMoreLabel }}
+		</a>
+	</div>
+</template>
+
+<script>
+import Avatar from '../Avatar/index.js'
+import DashboardWidgetItem from '../DashboardWidgetItem/index.js'
+import EmptyContent from '../EmptyContent/index.js'
+
+import { t } from '../../l10n.js'
+
+export default {
+	name: 'DashboardWidget',
+	components: {
+		Avatar,
+		DashboardWidgetItem,
+		EmptyContent,
+	},
+
+	props: {
+		/**
+		 * An array containing the items to show (specific structure must be respected,
+		 * except if you override item rendering in the default slot).
+		 */
+		items: {
+			type: Array,
+			default: () => { return [] },
+		},
+		/**
+		 * If this is set, a "show more" text is displayed on the widget's bottom.
+		 * It's a link pointing to this URL.
+		 */
+		showMoreUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The type of elements to show more.
+		 */
+		showMoreText: {
+			type: String,
+			default: t('items'),
+		},
+		/**
+		 * A boolean to put the widget in a loading state.
+		 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * An object containing context menu entries that will be displayed for each item.
+		 */
+		itemMenu: {
+			type: Object,
+			default: () => { return {} },
+		},
+		/**
+		 * Whether both the items and the empty content message are shown.
+		 * Usefull for e.g. showing "No mentions" and a list of elements.
+		 */
+		showItemsAndEmptyContent: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * The icon to show in the empty content area.
+		 */
+		emptyContentIcon: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The text to show in the empty content area.
+		 */
+		emptyContentMessage: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The icon to show in the half empty content area.
+		 */
+		halfEmptyContentIcon: {
+			type: String,
+			default: 'icon-checkmark',
+		},
+		/**
+		 * The text to show in the half empty content area.
+		 */
+		halfEmptyContentMessage: {
+			type: String,
+			default: '',
+		},
+	},
+
+	computed: {
+		// forward menu events to my parent
+		handlers() {
+			const h = {}
+			for (const evName in this.itemMenu) {
+				h[evName] = (it) => {
+					this.$emit(evName, it)
+				}
+			}
+			return h
+		},
+		displayedItems() {
+			const nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)
+				? this.maxItemNumber - 1
+				: this.maxItemNumber
+			return this.items.slice(0, nbItems)
+		},
+
+		showHalfEmptyContentArea() {
+			return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0
+		},
+
+		halfEmptyContentString() {
+			return this.halfEmptyContentMessage || this.emptyContentMessage
+		},
+
+		maxItemNumber() {
+			return this.showItemsAndEmptyContent ? 5 : 7
+		},
+
+		showMore() {
+			return this.showMoreUrl && this.items.length >= this.maxItemNumber
+		},
+
+		showMoreLabel() {
+			return t('More {what} …', { what: this.showMoreText })
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.empty-content {
+	text-align: center;
+	margin-top: 5vh;
+
+	&.half-screen {
+		margin-top: 0;
+		margin-bottom: 1vh;
+	}
+}
+
+.more {
+	display: block;
+	text-align: center;
+	color: var(--color-text-maxcontrast);
+	line-height: 60px;
+	cursor: pointer;
+
+	&:hover,
+	&:focus {
+		background-color: var(--color-background-hover);
+		border-radius: var(--border-radius-large);
+		color: var(--color-main-text);
+	}
+}
+
+/* skeleton */
+.item-list__entry {
+	display: flex;
+	align-items: flex-start;
+	padding: 8px;
+
+	.item-avatar {
+		position: relative;
+		margin-top: auto;
+		margin-bottom: auto;
+		background-color: var(--color-background-dark) !important;
+	}
+	.item__details {
+		padding-left: 8px;
+		max-height: 44px;
+		flex-grow: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+
+		h3,
+		.message {
+			white-space: nowrap;
+			background-color: var(--color-background-dark);
+		}
+		h3 {
+			font-size: 100%;
+			margin: 0;
+		}
+		.message {
+			width: 80%;
+			height: 15px;
+			margin-top: 5px;
+		}
+	}
+}
+</style>
diff --git a/src/components/DashboardWidget/index.js b/src/components/DashboardWidget/index.js
new file mode 100644
index 0000000000..6a75be14aa
--- /dev/null
+++ b/src/components/DashboardWidget/index.js
@@ -0,0 +1,3 @@
+import DashboardWidget from './DashboardWidget.vue'
+
+export default DashboardWidget
diff --git a/src/components/DashboardWidgetItem/DashboardWidgetItem.vue b/src/components/DashboardWidgetItem/DashboardWidgetItem.vue
new file mode 100644
index 0000000000..c33849b45b
--- /dev/null
+++ b/src/components/DashboardWidgetItem/DashboardWidgetItem.vue
@@ -0,0 +1,270 @@
+<!--
+ - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>
+ -
+ - @author Julien Veyssier <eneiluj@posteo.net>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+
+<docs>
+
+### General description
+
+This component is meant to be used inside a DashboardWidget component.
+
+</docs>
+
+<template>
+	<div @mouseover="hovered = true" @mouseleave="hovered = false">
+		<component :is="targetUrl ? 'a' : 'div'"
+			:href="targetUrl"
+			:target="targetUrl ? '_blank' : undefined"
+			:class="{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }"
+			@click="onLinkClick">
+			<!-- @slot Slot for passing a user avatar. -->
+			<slot name="avatar" :avatar-url="avatarUrl" :avatar-username="avatarUsername">
+				<Avatar class="item-avatar"
+					:size="44"
+					:url="avatarUrl"
+					:user="avatarUsername"
+					:is-no-user="avatarIsNoUser"
+					:show-user-status="!gotOverlayIcon" />
+			</slot>
+			<img v-if="overlayIconUrl"
+				class="item-icon"
+				alt=""
+				:src="overlayIconUrl">
+			<div class="item__details">
+				<h3 :title="mainText">
+					{{ mainText }}
+				</h3>
+				<p class="message" :title="subText">
+					{{ subText }}
+				</p>
+			</div>
+			<Actions v-if="gotMenu" :force-menu="forceMenu" menu-align="right">
+				<ActionButton v-for="(m, menuItemId) in itemMenu"
+					:key="menuItemId"
+					:icon="m.icon"
+					:close-after-click="true"
+					@click.prevent.stop="$emit(menuItemId, item)">
+					{{ m.text }}
+				</ActionButton>
+			</Actions>
+		</component>
+	</div>
+</template>
+
+<script>
+import Avatar from '../Avatar/index.js'
+import Actions from '../Actions/index.js'
+import ActionButton from '../ActionButton/index.js'
+
+export default {
+	name: 'DashboardWidgetItem',
+	components: {
+		Avatar,
+		Actions,
+		ActionButton,
+	},
+
+	props: {
+		/**
+		 * The item id (optional)
+		 */
+		id: {
+			type: [String, Number],
+			default: undefined,
+		},
+		/**
+		 * The item element is a link to this URL (optional)
+		 */
+		targetUrl: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * Where to get the avatar image. (optional) Used if avatarUsername is not defined.
+		 */
+		avatarUrl: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.
+		 */
+		avatarUsername: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * Is the avatarUsername not a user's name? (optional, false by default)
+		 */
+		avatarIsNoUser: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Small icon to display on the bottom-right corner of the avatar (optional)
+		 */
+		overlayIconUrl: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * Item main text (mandatory)
+		 */
+		mainText: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Item subline text (optional)
+		 */
+		subText: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * An object containing context menu entries that will be displayed for each items (optional)
+		 */
+		itemMenu: {
+			type: Object,
+			default: () => { return {} },
+		},
+
+		/**
+		 * Specify whether the 3 dot menu is forced when only one action is present
+		 */
+		forceMenu: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	data() {
+		return {
+			hovered: false,
+		}
+	},
+
+	computed: {
+		item() {
+			return {
+				id: this.id,
+				targetUrl: this.targetUrl,
+				avatarUrl: this.avatarUrl,
+				avatarUsername: this.avatarUsername,
+				overlayIconUrl: this.overlayIconUrl,
+				mainText: this.mainText,
+				subText: this.subText,
+			}
+		},
+		gotMenu() {
+			return Object.keys(this.itemMenu).length !== 0
+		},
+		gotOverlayIcon() {
+			return this.overlayIconUrl && this.overlayIconUrl !== ''
+		},
+	},
+
+	methods: {
+		onLinkClick(event) {
+			if (event.target.closest('.action-item')) {
+				event.preventDefault()
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.item-list__entry {
+	display: flex;
+	align-items: flex-start;
+	position: relative;
+	padding: 8px;
+
+	// Account for action menu
+	&--has-actions-menu {
+		padding-right: 0 !important;
+	}
+
+	&:hover,
+	&:focus {
+		background-color: var(--color-background-hover);
+		border-radius: var(--border-radius-large);
+	}
+	.item-avatar {
+		position: relative;
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+	.item__details {
+		padding-left: 8px;
+		max-height: 44px;
+		flex-grow: 1;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+
+		h3,
+		.message {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.message span {
+			width: 10px;
+			display: inline-block;
+			margin-bottom: -3px;
+		}
+		h3 {
+			font-size: 100%;
+			margin: 0;
+		}
+		.message {
+			width: 100%;
+			color: var(--color-text-maxcontrast);
+		}
+	}
+
+	.item-icon {
+		position: relative;
+		width: 14px;
+		height: 14px;
+		margin: 27px -3px 0px -7px;
+	}
+
+	button.primary {
+		padding: 21px;
+		margin: 0;
+	}
+}
+/*
+.content-popover {
+	height: 0px;
+	width: 0px;
+	margin-left: auto;
+	margin-right: auto;
+}
+.popover-container {
+	width: 100%;
+	height: 0px;
+}
+*/
+</style>
diff --git a/src/components/DashboardWidgetItem/index.js b/src/components/DashboardWidgetItem/index.js
new file mode 100644
index 0000000000..570f67ffc3
--- /dev/null
+++ b/src/components/DashboardWidgetItem/index.js
@@ -0,0 +1,3 @@
+import DashboardWidgetItem from './DashboardWidgetItem.vue'
+
+export default DashboardWidgetItem
diff --git a/src/components/index.js b/src/components/index.js
index 67f281d86c..afe68f190a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -55,6 +55,8 @@ export { default as CheckboxRadioSwitch } from './CheckboxRadioSwitch/index.js'
 export { default as ColorPicker } from './ColorPicker/index.js'
 export { default as Content } from './Content/index.js'
 export { default as CounterBubble } from './CounterBubble/index.js'
+export { default as DashboardWidget } from './DashboardWidget/index.js'
+export { default as DashboardWidgetItem } from './DashboardWidgetItem/index.js'
 export { default as DatetimePicker } from './DatetimePicker/index.js'
 export { default as EmptyContent } from './EmptyContent/index.js'
 export { default as ListItem } from './ListItem/index.js'
diff --git a/styleguide.config.js b/styleguide.config.js
index 1aa48c6b75..4742a85f35 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -69,6 +69,7 @@ module.exports = {
 				'src/components/AppSidebar*/*.vue',
 				'src/components/Breadcrumb*/*.vue',
 				'src/components/Content/*.vue',
+				'src/components/Dashboard*/*.vue',
 				'src/components/Multiselect*/*.vue',
 				'src/components/PopoverMenu/!(PopoverMenu).vue',
 				'src/components/ListItem*/*.vue',
@@ -125,6 +126,12 @@ module.exports = {
 						'src/components/Breadcrumb*/*.vue',
 					],
 				},
+				{
+					name: 'Dashboard',
+					components: [
+						'src/components/Dashboard*/*.vue',
+					],
+				},
 				{
 					name: 'List items',
 					components: [