diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 20e4a7e..840fc87 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -2,6 +2,7 @@ import type { Preview, VueRenderer } from '@storybook/vue3'
 import { withThemeByClassName } from '@storybook/addon-themes'
 
 import '../src/main.css'
+import './storybook.css'
 
 const preview: Preview = {
   parameters: {
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
new file mode 100644
index 0000000..e5a4660
--- /dev/null
+++ b/.storybook/storybook.css
@@ -0,0 +1,9 @@
+.sb-show-main.sb-main-padded {
+  /* remove default padding from component area */
+  padding: 0;
+}
+
+#storybook-root {
+  /* set background color according to theme */
+  @apply h-screen bg-gray-50 dark:bg-gray-900;
+}
diff --git a/src/components/NeCard.vue b/src/components/NeCard.vue
new file mode 100644
index 0000000..2711e5c
--- /dev/null
+++ b/src/components/NeCard.vue
@@ -0,0 +1,112 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import NeSkeleton from './NeSkeleton.vue'
+import NeInlineNotification from './NeInlineNotification.vue'
+import NeDropdown, { type NeDropdownItem } from './NeDropdown.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Array<string>,
+    default: () => []
+  },
+  loading: {
+    type: Boolean
+  },
+  skeletonLines: {
+    type: Number,
+    default: 4
+  },
+  errorTitle: {
+    type: String,
+    default: ''
+  },
+  errorDescription: {
+    type: String,
+    default: ''
+  },
+  menuItems: {
+    type: Array<NeDropdownItem>,
+    default: () => []
+  },
+  alternateBackground: {
+    type: Boolean
+  }
+})
+
+defineEmits(['titleClick'])
+</script>
+
+<template>
+  <div
+    :class="[
+      `overflow-hidden px-4 py-5 text-sm text-gray-700 dark:text-gray-200 sm:rounded-lg sm:px-6 sm:shadow`,
+      props.alternateBackground ? 'bg-gray-50 dark:bg-gray-900' : 'bg-white dark:bg-gray-950'
+    ]"
+  >
+    <!-- header -->
+    <div class="flex justify-between">
+      <!-- title -->
+      <h3
+        v-if="title || $slots.title"
+        class="mb-3 font-semibold leading-6 text-gray-900 dark:text-gray-50"
+      >
+        <span v-if="title">
+          {{ title }}
+        </span>
+        <slot v-if="$slots.title" name="title"></slot>
+        <span v-if="$slots.titleTooltip" class="ml-1">
+          <slot name="titleTooltip"></slot>
+        </span>
+      </h3>
+      <!-- top-right slot (e.g. for kebab menu) -->
+      <div
+        v-if="$slots.topRight || menuItems?.length"
+        class="relative -right-1.5 -top-1.5 flex items-center"
+      >
+        <div v-if="$slots.topRight">
+          <slot name="topRight"></slot>
+        </div>
+        <!-- top-right menu -->
+        <div v-if="menuItems?.length">
+          <NeDropdown :items="menuItems" :align-to-right="true" />
+        </div>
+      </div>
+    </div>
+    <!-- description and content -->
+    <div class="flex flex-row items-center justify-between">
+      <div class="grow">
+        <NeSkeleton v-if="loading" :lines="skeletonLines"></NeSkeleton>
+        <NeInlineNotification
+          v-else-if="errorTitle"
+          kind="error"
+          :title="errorTitle"
+          :description="errorDescription"
+        />
+        <template v-else>
+          <div v-if="description" class="mb-3 text-gray-500 dark:text-gray-400">
+            {{ description }}
+          </div>
+          <slot></slot>
+        </template>
+      </div>
+      <FontAwesomeIcon
+        v-if="icon?.length"
+        :icon="icon"
+        class="ml-4 h-6 w-6 shrink-0 text-gray-400 dark:text-gray-600"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/NeDropdown.vue b/src/components/NeDropdown.vue
new file mode 100644
index 0000000..bb52f03
--- /dev/null
+++ b/src/components/NeDropdown.vue
@@ -0,0 +1,142 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import NeButton from './NeButton.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faEllipsisVertical as fasEllipsisVertical } from '@fortawesome/free-solid-svg-icons'
+import { ref, watch } from 'vue'
+
+export interface Props {
+  items: NeDropdownItem[]
+  alignToRight: boolean
+  openMenuAriaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  alignToRight: false,
+  openMenuAriaLabel: 'Open menu'
+})
+
+export interface NeDropdownItem {
+  id: string
+  label?: string
+  icon?: string
+  iconStyle?: string
+  danger?: boolean
+  action?: () => void
+  disabled?: boolean
+}
+
+library.add(fasEllipsisVertical)
+
+function onItemClick(item: NeDropdownItem) {
+  if (!item.disabled && item.action) {
+    item.action()
+  }
+}
+
+function getMenuItemActiveClasses(item: NeDropdownItem) {
+  if (item.danger) {
+    return 'bg-rose-700 text-white dark:bg-rose-600 dark:text-white'
+  } else {
+    return 'bg-gray-100 dark:bg-gray-800'
+  }
+}
+
+const top = ref(0)
+const left = ref(0)
+const right = ref(0)
+const buttonRef = ref<InstanceType<typeof MenuButton> | null>(null)
+
+function calculatePosition() {
+  top.value = buttonRef.value?.$el.getBoundingClientRect().bottom + window.scrollY
+  left.value = buttonRef.value?.$el.getBoundingClientRect().left - window.scrollX
+  right.value =
+    document.documentElement.clientWidth -
+    buttonRef.value?.$el.getBoundingClientRect().right -
+    window.scrollX
+}
+
+watch(
+  () => props.alignToRight,
+  () => {
+    calculatePosition()
+  }
+)
+</script>
+
+<template>
+  <Menu as="div" class="relative inline-block text-left">
+    <MenuButton
+      ref="buttonRef"
+      class="flex items-center text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50"
+      @click="calculatePosition()"
+    >
+      <span class="sr-only">{{ openMenuAriaLabel }}</span>
+      <slot name="button">
+        <!-- default kebab button -->
+        <NeButton class="py-2" kind="tertiary">
+          <font-awesome-icon
+            :icon="['fas', 'ellipsis-vertical']"
+            aria-hidden="true"
+            class="h-5 w-5 shrink-0"
+          />
+        </NeButton>
+      </slot>
+    </MenuButton>
+    <Teleport to="body">
+      <transition
+        enter-active-class="transition ease-out duration-100"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <MenuItems
+          :style="[
+            { top: top + 'px' },
+            alignToRight ? { right: right + 'px' } : { left: left + 'px' }
+          ]"
+          class="absolute z-50 mt-2.5 min-w-[10rem] rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-gray-950 dark:ring-gray-500/50"
+        >
+          <template v-for="item in items" :key="item.id">
+            <!-- divider -->
+            <hr
+              v-if="item.id.includes('divider')"
+              class="my-1 border-gray-200 dark:border-gray-700"
+            />
+            <!-- item -->
+            <MenuItem v-else v-slot="{ active }" :disabled="item.disabled">
+              <a
+                :class="[
+                  active ? getMenuItemActiveClasses(item) : '',
+                  'group flex items-center px-4 py-2 text-sm',
+                  item.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+                  item.danger
+                    ? 'text-rose-700 dark:text-rose-500'
+                    : 'text-gray-700 dark:text-gray-50'
+                ]"
+                @click="onItemClick(item)"
+              >
+                <font-awesome-icon
+                  v-if="item.icon"
+                  :icon="[item.iconStyle || 'fas', item.icon]"
+                  aria-hidden="true"
+                  class="mr-2 h-5 w-5 shrink-0"
+                />
+                {{ item.label }}
+              </a>
+            </MenuItem>
+          </template>
+        </MenuItems>
+      </transition>
+    </Teleport>
+  </Menu>
+</template>
diff --git a/src/main.ts b/src/main.ts
index 26e8225..7bb2ff1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -22,6 +22,8 @@ export { default as NeTableBody } from '@/components/NeTableBody.vue'
 export { default as NeTableRow } from '@/components/NeTableRow.vue'
 export { default as NeTableCell } from '@/components/NeTableCell.vue'
 export { default as NeCombobox } from '@/components/NeCombobox.vue'
+export { default as NeDropdown } from '@/components/NeDropdown.vue'
+export { default as NeCard } from '@/components/NeCard.vue'
 
 // types
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'
diff --git a/stories/NeCard.stories.ts b/stories/NeCard.stories.ts
new file mode 100644
index 0000000..6356b06
--- /dev/null
+++ b/stories/NeCard.stories.ts
@@ -0,0 +1,222 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { NeCard, NeTooltip, NeButton } from '../src/main'
+import { faHeart } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+library.add(faHeart)
+
+const meta = {
+  title: 'Visual/NeCard',
+  component: NeCard,
+  tags: ['autodocs'],
+  args: {
+    title: 'Card title',
+    description: '',
+    icon: [],
+    loading: false,
+    skeletonLines: 4,
+    errorTitle: '',
+    errorDescription: '',
+    menuItems: [],
+    alternateBackground: false
+  }
+} satisfies Meta<typeof NeCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate =
+  '<NeCard v-bind="args">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</NeCard>'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {}
+}
+
+const titleSlotTemplate = `<NeCard v-bind="args">
+  <template #title>
+    <span>Card title</span>
+    <span class='ml-1 text-gray-500 dark:text-gray-400'>
+      (with slot)
+    </span>
+  </template>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+</NeCard>`
+
+export const TitleSlot: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: titleSlotTemplate
+  }),
+  args: { title: '' }
+}
+
+export const WithDescription: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { description: 'Card description' }
+}
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { icon: ['fas', 'heart'] }
+}
+
+export const Loading: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { loading: true }
+}
+
+export const Error: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    errorTitle: 'Cannot retrieve data',
+    errorDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+  }
+}
+
+const templateWithTooltip =
+  '<NeCard v-bind="args">\
+      <template #titleTooltip>\
+        <NeTooltip>\
+          <template #content>Tooltip</template>\
+        </NeTooltip>\
+      </template>\
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
+    </NeCard>'
+
+export const WithTooltip: Story = {
+  render: (args) => ({
+    components: { NeCard, NeTooltip },
+    setup() {
+      return { args }
+    },
+    template: templateWithTooltip
+  }),
+  args: {}
+}
+
+export const WithMenu: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    menuItems: [
+      {
+        id: 'edit',
+        label: 'Edit'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        danger: true
+      }
+    ]
+  }
+}
+
+const templateWithTopRightSlot = `<NeCard v-bind="args">
+  <template #topRight>
+    <NeButton kind='tertiary'>Button</NeButton>
+  </template>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</NeCard>`
+
+export const WithTopRightSlot: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithTopRightSlot
+  }),
+  args: {}
+}
+
+export const WithMenuAndTopRightSlot: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithTopRightSlot
+  }),
+  args: {
+    menuItems: [
+      {
+        id: 'edit',
+        label: 'Edit'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        danger: true
+      }
+    ]
+  }
+}
+
+const alternateBackgroundTemplate = `
+  <div class="bg-white dark:bg-gray-950 p-12 flex flex-col text-sm gap-6">
+    <div class="text-gray-700 dark:text-gray-200">
+      Alternate background is useful to get contrast when the card is placed in a container with the same background as the default card background
+    </div>
+    <NeCard v-bind="args" :alternateBackground="false">
+      Card with default background
+    </NeCard>
+    <NeCard v-bind="args">
+      Card with alternate background
+    </NeCard>
+  </div>`
+
+export const AlternateBackground: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: alternateBackgroundTemplate
+  }),
+  args: {
+    alternateBackground: true
+  }
+}
diff --git a/stories/NeDropdown.stories.ts b/stories/NeDropdown.stories.ts
new file mode 100644
index 0000000..8518641
--- /dev/null
+++ b/stories/NeDropdown.stories.ts
@@ -0,0 +1,116 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { NeDropdown, NeButton } from '../src/main'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPenToSquare as fasPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { faFloppyDisk as fasFloppyDisk } from '@fortawesome/free-solid-svg-icons'
+import { faTrashCan as fasTrashCan } from '@fortawesome/free-solid-svg-icons'
+import { faCopy as fasCopy } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown as fasChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(fasPenToSquare)
+library.add(fasFloppyDisk)
+library.add(fasTrashCan)
+library.add(fasCopy)
+library.add(fasChevronDown)
+
+const meta = {
+  title: 'Visual/NeDropdown',
+  component: NeDropdown,
+  tags: ['autodocs'],
+  args: {
+    items: [
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'pen-to-square',
+        iconStyle: 'fas',
+        action: () => {}
+      },
+      {
+        id: 'copy',
+        label: 'Copy',
+        icon: 'copy',
+        iconStyle: 'fas',
+        action: () => {}
+      },
+      {
+        id: 'save',
+        label: 'Save',
+        icon: 'floppy-disk',
+        iconStyle: 'fas',
+        action: () => {},
+        disabled: true
+      },
+      {
+        id: 'divider1'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash-can',
+        iconStyle: 'fas',
+        danger: true,
+        action: () => {}
+      }
+    ],
+    alignToRight: false,
+    openMenuAriaLabel: 'Open menu'
+  }
+} satisfies Meta<typeof NeDropdown>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const template = '<NeDropdown v-bind="args" />'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeDropdown },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {}
+}
+
+const alignToRightTemplate = '<NeDropdown v-bind="args" class="ml-48" />'
+
+export const AlignToRight: Story = {
+  render: (args) => ({
+    components: { NeDropdown },
+    setup() {
+      return { args }
+    },
+    template: alignToRightTemplate
+  }),
+  args: { alignToRight: true }
+}
+
+const withSlotTemplate =
+  '<NeDropdown v-bind="args">\
+    <template #button>\
+      <NeButton>\
+        <template #suffix>\
+          <font-awesome-icon :icon="[\'fas\', \'chevron-down\']" class="h-4 w-4" aria-hidden="true" />\
+        </template>\
+        Menu\
+      </NeButton>\
+    </template>\
+  </NeDropdown>'
+
+export const WithSlot: Story = {
+  render: (args) => ({
+    components: { NeDropdown, NeButton, FontAwesomeIcon },
+    setup() {
+      return { args }
+    },
+    template: withSlotTemplate
+  }),
+  args: {}
+}