diff --git a/packages/storybook-vue/public/assets/3_components/accordion/Elements.png b/packages/storybook-vue/public/assets/3_components/accordion/Elements.png
new file mode 100644
index 0000000000..1cb27dd772
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/accordion/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/accordion/accordion.png b/packages/storybook-vue/public/assets/3_components/accordion/accordion.png
deleted file mode 100644
index 16e0de56fc..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/accordion/accordion.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb-general.png b/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb-general.png
deleted file mode 100644
index e71787c315..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb-general.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb.png b/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb.png
new file mode 100644
index 0000000000..a7c34c36a7
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/breadcrumb/breadcrumb.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png b/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png
index 22d3c500fb..42835c14fa 100644
Binary files a/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png and b/packages/storybook-vue/public/assets/3_components/breadcrumb/elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/ButtonGroup_Modal.png b/packages/storybook-vue/public/assets/3_components/button/ButtonGroup_Modal.png
deleted file mode 100644
index a5d44504c5..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/button/ButtonGroup_Modal.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/Button_BasicTypes.png b/packages/storybook-vue/public/assets/3_components/button/Button_BasicTypes.png
deleted file mode 100644
index 87b98a78cb..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/button/Button_BasicTypes.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/Button_Disabled.png b/packages/storybook-vue/public/assets/3_components/button/Button_Disabled.png
deleted file mode 100644
index bfa12b037a..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/button/Button_Disabled.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/Button_Sizes.png b/packages/storybook-vue/public/assets/3_components/button/Button_Sizes.png
deleted file mode 100644
index 6d8e7c079c..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/button/Button_Sizes.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/button-best-practice.png b/packages/storybook-vue/public/assets/3_components/button/button-best-practice.png
new file mode 100644
index 0000000000..e78470c369
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-best-practice.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/button-best-practice2.png b/packages/storybook-vue/public/assets/3_components/button/button-best-practice2.png
new file mode 100644
index 0000000000..a9f8a9091f
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-best-practice2.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/button-disabled.png b/packages/storybook-vue/public/assets/3_components/button/button-disabled.png
new file mode 100644
index 0000000000..4518a1e8e8
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-disabled.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/button-ghost.png b/packages/storybook-vue/public/assets/3_components/button/button-ghost.png
new file mode 100644
index 0000000000..46b73fe8ce
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-ghost.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/button-secondary-white.png b/packages/storybook-vue/public/assets/3_components/button/button-secondary-white.png
new file mode 100644
index 0000000000..13de320fba
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-secondary-white.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/button-sizes.png b/packages/storybook-vue/public/assets/3_components/button/button-sizes.png
new file mode 100644
index 0000000000..22b9f79ae5
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button-sizes.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/button/button.png b/packages/storybook-vue/public/assets/3_components/button/button.png
new file mode 100644
index 0000000000..1677f666ca
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/button/button.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/card/cards_general.png b/packages/storybook-vue/public/assets/3_components/card/cards_general.png
index 6ce7d629a4..fb1f913c24 100644
Binary files a/packages/storybook-vue/public/assets/3_components/card/cards_general.png and b/packages/storybook-vue/public/assets/3_components/card/cards_general.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group.png
deleted file mode 100644
index f6b51a9ec2..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png
deleted file mode 100644
index c67101848e..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png
deleted file mode 100644
index 490e14e1d1..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Elements.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Elements.png
deleted file mode 100644
index e6bfac525f..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_Elements.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png
deleted file mode 100644
index e266107ee9..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png
deleted file mode 100644
index 1616bcb8d3..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/Elements.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/Elements.png
new file mode 100644
index 0000000000..fadd84cca2
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-de.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-de.png
new file mode 100644
index 0000000000..c72cbd3df5
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-en.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-en.png
new file mode 100644
index 0000000000..316a562635
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png
new file mode 100644
index 0000000000..909c37f36b
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png
new file mode 100644
index 0000000000..de8af67757
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group.png b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group.png
new file mode 100644
index 0000000000..381d3b2f10
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/checkbox-group/checkbox-group.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-DE.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-DE.png
deleted file mode 100644
index 15efdc9f77..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-EN.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-EN.png
deleted file mode 100644
index f509c41742..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Outline-EN.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-DE.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-DE.png
deleted file mode 100644
index e3858cfb54..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-EN.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-EN.png
deleted file mode 100644
index 41ea118279..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Disabled-Standard-EN.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example1.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example1.png
deleted file mode 100644
index 29104c5efc..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example1.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png
deleted file mode 100644
index b022b77bc6..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Default.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Default.png
deleted file mode 100644
index 60db725f2c..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Default.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Selected.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Selected.png
deleted file mode 100644
index e274e0ed16..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Persistent-Selected.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Types.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Types.png
deleted file mode 100644
index 2b36801c58..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Types.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Outline.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Outline.png
deleted file mode 100644
index f3fd02c42f..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Outline.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Standard.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Standard.png
deleted file mode 100644
index 6d91b6452c..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-Variant-Standard.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Chips-elements.png b/packages/storybook-vue/public/assets/3_components/chip/Chips-elements.png
deleted file mode 100644
index df8fbffbf1..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Chips-elements.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Elements.png b/packages/storybook-vue/public/assets/3_components/chip/Elements.png
new file mode 100644
index 0000000000..999371f4a4
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/Standard_Chip.png b/packages/storybook-vue/public/assets/3_components/chip/Standard_Chip.png
deleted file mode 100644
index d00bc3ac47..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/Standard_Chip.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-de.png b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-de.png
new file mode 100644
index 0000000000..5028a5785a
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-en.png b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-en.png
new file mode 100644
index 0000000000..d9fcd6a60e
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-disabled-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic-chatbot.png b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic-chatbot.png
new file mode 100644
index 0000000000..ba15d6017a
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic-chatbot.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic.png b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic.png
new file mode 100644
index 0000000000..5a7ef3669c
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-dynamic.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-default.png b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-default.png
new file mode 100644
index 0000000000..7d21a4af80
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-default.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-selected.png b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-selected.png
new file mode 100644
index 0000000000..31b1e67c3d
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-persistent-selected.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-standard.png b/packages/storybook-vue/public/assets/3_components/chip/chip-standard.png
new file mode 100644
index 0000000000..4ac616d484
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-standard.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chip-types.png b/packages/storybook-vue/public/assets/3_components/chip/chip-types.png
new file mode 100644
index 0000000000..172d5d5e4f
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/chip/chip-types.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-de.png b/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-de.png
deleted file mode 100644
index 24af640cf6..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-de.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-en.png b/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-en.png
deleted file mode 100644
index 4424fa7222..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/chip/chips-disabled-en.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/Elements.png b/packages/storybook-vue/public/assets/3_components/data-table/Elements.png
new file mode 100644
index 0000000000..def6e448d2
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/data-table-elements.png b/packages/storybook-vue/public/assets/3_components/data-table/data-table-elements.png
deleted file mode 100644
index 66819cc91c..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/data-table/data-table-elements.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/data-table-mobile.png b/packages/storybook-vue/public/assets/3_components/data-table/data-table-mobile.png
deleted file mode 100644
index 6f209cf32c..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/data-table/data-table-mobile.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-de.png b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-de.png
new file mode 100644
index 0000000000..c585e861d0
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-en.png b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-en.png
new file mode 100644
index 0000000000..2ece46ee07
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-alternating-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-mobile.png b/packages/storybook-vue/public/assets/3_components/data-table/table-mobile.png
new file mode 100644
index 0000000000..7c5dde7289
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-mobile.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-single-de.png b/packages/storybook-vue/public/assets/3_components/data-table/table-single-de.png
new file mode 100644
index 0000000000..e5edf61084
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-single-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/data-table/table-single-en.png b/packages/storybook-vue/public/assets/3_components/data-table/table-single-en.png
new file mode 100644
index 0000000000..2764fc31ac
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/data-table/table-single-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png
deleted file mode 100644
index 9d97bc0a20..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png
deleted file mode 100644
index 567385ce65..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/dropdown-select/Dropdown_select_elements.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/Elements.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/Elements.png
new file mode 100644
index 0000000000..65840debf1
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/dropdown-select/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/dropdown-select/dropdown-select.png b/packages/storybook-vue/public/assets/3_components/dropdown-select/dropdown-select.png
new file mode 100644
index 0000000000..6ba6350466
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/dropdown-select/dropdown-select.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/Elements.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/Elements.png
new file mode 100644
index 0000000000..0d112eb8fb
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/flyout-menu/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu.png
deleted file mode 100644
index 1565733ce8..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu_Elements.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu_Elements.png
deleted file mode 100644
index da096ab8fd..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/flyout-menu/Flyout_Menu_Elements.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/flyout-menu/flyout-menu.png b/packages/storybook-vue/public/assets/3_components/flyout-menu/flyout-menu.png
new file mode 100644
index 0000000000..35fe87c812
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/flyout-menu/flyout-menu.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Elements.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Elements.png
new file mode 100644
index 0000000000..9fbc63facd
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png
deleted file mode 100644
index 549fe483d2..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png
deleted file mode 100644
index 4c754969e5..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png and /dev/null differ
diff --git "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-DE.png" "b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-DE.png"
deleted file mode 100644
index 60ba492d46..0000000000
Binary files "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-DE.png" and /dev/null differ
diff --git "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-EN.png" "b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-EN.png"
deleted file mode 100644
index c22a0e6ad2..0000000000
Binary files "a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Groe\303\237en-EN.png" and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png
deleted file mode 100644
index 114df910a9..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png
deleted file mode 100644
index 6f133e2e8e..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-spinner-elemente.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-spinner-elemente.png
deleted file mode 100644
index 793b6f6811..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/loading-spinner/Loading-spinner-elemente.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-de.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-de.png
new file mode 100644
index 0000000000..488cb51cb4
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-en.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-en.png
new file mode 100644
index 0000000000..fa6ed4806e
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-colors-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-de.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-de.png
new file mode 100644
index 0000000000..d4646502f6
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-en.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-en.png
new file mode 100644
index 0000000000..5a657bd82c
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-sizes-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-de.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-de.png
new file mode 100644
index 0000000000..2f71474eae
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-en.png b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-en.png
new file mode 100644
index 0000000000..05ea7bf876
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/loading-spinner/loading-spinner-variants-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/logo/Colors.png b/packages/storybook-vue/public/assets/3_components/logo/Colors.png
new file mode 100644
index 0000000000..646fcad899
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/logo/Colors.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/logo/Farben-DE.png b/packages/storybook-vue/public/assets/3_components/logo/Farben-DE.png
deleted file mode 100644
index 0a75f5f62d..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/logo/Farben-DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/logo/Farben-EN.png b/packages/storybook-vue/public/assets/3_components/logo/Farben-EN.png
deleted file mode 100644
index 9df0d0572d..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/logo/Farben-EN.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png b/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png
index 8b3c20dac2..339d11a4a1 100644
Binary files a/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png and b/packages/storybook-vue/public/assets/3_components/modal/Modal_Basic.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png b/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png
index 53c85cdd05..348e5a467d 100644
Binary files a/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png and b/packages/storybook-vue/public/assets/3_components/modal/Modal_Scrolling.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/desktop_12columns.png b/packages/storybook-vue/public/assets/3_components/modal/desktop_12columns.png
deleted file mode 100644
index 7788d0eb2a..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/modal/desktop_12columns.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/desktop_6columns.png b/packages/storybook-vue/public/assets/3_components/modal/desktop_6columns.png
deleted file mode 100644
index a64ca08fbd..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/modal/desktop_6columns.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/desktop_8columns.png b/packages/storybook-vue/public/assets/3_components/modal/desktop_8columns.png
deleted file mode 100644
index fd7db3ca9a..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/modal/desktop_8columns.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/modal-large.png b/packages/storybook-vue/public/assets/3_components/modal/modal-large.png
new file mode 100644
index 0000000000..4d817aba01
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/modal/modal-large.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/modal-medium.png b/packages/storybook-vue/public/assets/3_components/modal/modal-medium.png
new file mode 100644
index 0000000000..f9f1360a8e
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/modal/modal-medium.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/modal/modal-small.png b/packages/storybook-vue/public/assets/3_components/modal/modal-small.png
new file mode 100644
index 0000000000..ae134d0ada
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/modal/modal-small.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-de.png b/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-de.png
deleted file mode 100644
index 372a423521..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-de.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-en.png b/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-en.png
deleted file mode 100644
index 13b2f1ccd7..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/pagination/Basic-types-en.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/pagination/Elements.png b/packages/storybook-vue/public/assets/3_components/pagination/Elements.png
index a1d4ee11b0..4598dd6d60 100644
Binary files a/packages/storybook-vue/public/assets/3_components/pagination/Elements.png and b/packages/storybook-vue/public/assets/3_components/pagination/Elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-de.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-de.png
new file mode 100644
index 0000000000..f08a3fda0b
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-en.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-en.png
new file mode 100644
index 0000000000..b8114221d8
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-de.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-de.png
new file mode 100644
index 0000000000..eeff1b8229
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-de.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-en.png b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-en.png
new file mode 100644
index 0000000000..32a86e4619
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/pagination/pagination-mobile-en.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png
index 825bcc0cb1..0007e66643 100644
Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb-indeterminate.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png
index 9d9cdcd77a..48ced70e45 100644
Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_determinate_procent-done.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_disabled.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_disabled.png
new file mode 100644
index 0000000000..898070a4fd
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_disabled.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png
index 8bea09b235..8e520c9564 100644
Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-error.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-error.png
new file mode 100644
index 0000000000..b70f63da6e
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-error.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-processing.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-processing.png
new file mode 100644
index 0000000000..304192d237
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-processing.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-success.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-success.png
new file mode 100644
index 0000000000..9782055ee5
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states-success.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states.png b/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states.png
deleted file mode 100644
index 76f13a8916..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/progress-bar/pb_states.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider-elements-DE.png
deleted file mode 100644
index 5aba2cdb39..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-DE.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider-elements-EN.png
deleted file mode 100644
index 5aba2cdb39..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider-elements-EN.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-elements.png b/packages/storybook-vue/public/assets/3_components/slider/slider-elements.png
new file mode 100644
index 0000000000..57436efc29
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/slider/slider-elements.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider-platforms.png b/packages/storybook-vue/public/assets/3_components/slider/slider-platforms.png
new file mode 100644
index 0000000000..9455dc0b5e
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/slider/slider-platforms.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png
index a59788ae9e..f8257f3b3e 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_color-DE.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png
index e17a5bd696..7c4fc28938 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_color-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png
index f0ac2c9fa1..017825f20a 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-DE.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png
index db9374b35a..bfa12f41d5 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_disabled-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png
index 80240d8167..447fc7cf72 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-DE.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png
index 9fd1e76cbe..b5455c4073 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-range-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png
index 597e2fceeb..1a4b6f7686 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-DE.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png
index 998ec266c0..35ea60aca9 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png
index 034e5b090d..8581d0fcdd 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-DE.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png
index e928901846..d7d8d2fb9f 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-stepped-range-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png
index a739ce31ad..765891bcde 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-DE.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png
index dbeca3584e..765891bcde 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_types-value-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png
index 5e2f9b4957..426e3e824d 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-DE.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png
index 0fce24f038..4adb9a3d8b 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png
index bfe3593154..5c50e8b59f 100644
Binary files a/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png and b/packages/storybook-vue/public/assets/3_components/slider/slider_variants-message-EN.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch.png b/packages/storybook-vue/public/assets/3_components/switch/switch.png
index 739d8cce9e..46b1dc24d0 100644
Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch.png and b/packages/storybook-vue/public/assets/3_components/switch/switch.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_android.png b/packages/storybook-vue/public/assets/3_components/switch/switch_android.png
index b72eec79e0..95eebdf83e 100644
Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch_android.png and b/packages/storybook-vue/public/assets/3_components/switch/switch_android.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_disabled.png b/packages/storybook-vue/public/assets/3_components/switch/switch_disabled.png
new file mode 100644
index 0000000000..bae7f1157a
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/switch/switch_disabled.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_label.png b/packages/storybook-vue/public/assets/3_components/switch/switch_label.png
index d6a79d4e60..1b2fb78adf 100644
Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch_label.png and b/packages/storybook-vue/public/assets/3_components/switch/switch_label.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/switch/switch_large.png b/packages/storybook-vue/public/assets/3_components/switch/switch_large.png
index 8774f964dd..7ccebebe9a 100644
Binary files a/packages/storybook-vue/public/assets/3_components/switch/switch_large.png and b/packages/storybook-vue/public/assets/3_components/switch/switch_large.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png b/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png
index d0b9392838..72e7265d9f 100644
Binary files a/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png and b/packages/storybook-vue/public/assets/3_components/text-input/input_disabled.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png b/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png
index 595f1a5270..e9d12ab6b3 100644
Binary files a/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png and b/packages/storybook-vue/public/assets/3_components/text-input/input_readonly.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/definition_list.png b/packages/storybook-vue/public/assets/3_components/text-list/definition_list.png
deleted file mode 100644
index 7203d5f67d..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/text-list/definition_list.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/image-20200807134929248.png b/packages/storybook-vue/public/assets/3_components/text-list/image-20200807134929248.png
deleted file mode 100644
index 919b7225a2..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/text-list/image-20200807134929248.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132054388.png b/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132054388.png
deleted file mode 100644
index 159225facb..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132054388.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132442835.png b/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132442835.png
deleted file mode 100644
index 9f0ac977d9..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/text-list/image-20200810132442835.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/ordered_list.png b/packages/storybook-vue/public/assets/3_components/text-list/ordered_list.png
deleted file mode 100644
index 0e43bce36c..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/text-list/ordered_list.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-ordered.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-ordered.png
new file mode 100644
index 0000000000..5a63d7c09f
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-ordered.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-unordered.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-unordered.png
new file mode 100644
index 0000000000..43822fd578
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/text-list/text-list-detail-unordered.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list-general.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list-general.png
new file mode 100644
index 0000000000..c1a8d97faf
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/text-list/text-list-general.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/text-list_general.png b/packages/storybook-vue/public/assets/3_components/text-list/text-list_general.png
deleted file mode 100644
index 40648c7f6c..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/text-list/text-list_general.png and /dev/null differ
diff --git a/packages/storybook-vue/public/assets/3_components/text-list/unordered_list.png b/packages/storybook-vue/public/assets/3_components/text-list/unordered_list.png
deleted file mode 100644
index 6841f456ec..0000000000
Binary files a/packages/storybook-vue/public/assets/3_components/text-list/unordered_list.png and /dev/null differ
diff --git a/packages/storybook-vue/stories/FAQ_de.md b/packages/storybook-vue/stories/FAQ_de.md
index fc60921cf9..94a01be903 100644
--- a/packages/storybook-vue/stories/FAQ_de.md
+++ b/packages/storybook-vue/stories/FAQ_de.md
@@ -42,7 +42,7 @@ Wie du mitmachen kannst, [erfährst du hier](./?path=/story/contact-contributing
**Ja.**
Unser open-source Designsystem ist derzeit eine Open Beta. Deshalb freuen wir uns über dein Feedback! Und auch darüber, wenn du mit deiner Erfahrung und mit deinen Fähigkeiten und Ideen für neue Komponenten und Funktionen mithilfst, Scale weiter zu verbessern.
-Du findest den [Scale Sourcecode auf GitHub.](https://github.com/telekom/scale/)
+Du findest den Scale Sourcecode auf GitHub.
## Ich benötige eine Komponente, die noch nicht in Scale verfügbar ist. Was kann ich tun?
diff --git a/packages/storybook-vue/stories/FAQ_en.md b/packages/storybook-vue/stories/FAQ_en.md
index baa665d436..1397fef80f 100644
--- a/packages/storybook-vue/stories/FAQ_en.md
+++ b/packages/storybook-vue/stories/FAQ_en.md
@@ -46,7 +46,7 @@ Scale is currently an open beta. It is growing and evolving every day. And the c
Our open-source design system is currently an open beta.
We are excited to receive your feedback! And we are delighted if you help us improve Scale with your ideas, experience and skills for developing new components and features.
-You can find the [Scale Sourcecode on GitHub](https://github.com/telekom/scale/).
+You can find the Scale Sourcecode on GitHub
## What if I need a new component?
diff --git a/packages/storybook-vue/stories/components/accordion/accordion.md b/packages/storybook-vue/stories/components/accordion/accordion.md
index ae7b13392c..6dc4f39840 100644
--- a/packages/storybook-vue/stories/components/accordion/accordion.md
+++ b/packages/storybook-vue/stories/components/accordion/accordion.md
@@ -27,19 +27,19 @@ Bear in mind that accordions require a great deal of interaction. Don't use an a
## Elements
-![Image Name](assets/3_components/accordion/accordion.png)
+![Image Name](assets/3_components/accordion/Elements.png)
#### Icon (1)
The arrow icon indicates whether the panel is open or closed.
-#### Title (2)
+#### Label (2)
Choose a topic title which is as clear and descriptive as possible. Try to keep it short so users can grasp the content quickly.
The title and icon are the control for opening the panel.
-#### Body text (3)
+#### Text Expanded Area (3)
You can add a simple body text or also insert headlines, split text into paragraphs, and add images or illustrations. Keep it as simple and clear as possible.
diff --git a/packages/storybook-vue/stories/components/accordion/accordion_de.md b/packages/storybook-vue/stories/components/accordion/accordion_de.md
index a9d12dd8e5..23cbd7367e 100644
--- a/packages/storybook-vue/stories/components/accordion/accordion_de.md
+++ b/packages/storybook-vue/stories/components/accordion/accordion_de.md
@@ -25,17 +25,17 @@ Ein Accordion besteht aus einer Liste von Headlines. Per Klick/Tap öffnen bezie
## Elemente
-![Image Name](assets/3_components/accordion/accordion.png)
+![Image Name](assets/3_components/accordion/Elements.png)
#### Icon (1)
Das Pfeilsymbol zeigt an, ob ein Inhalt geöffnet oder geschlossen ist.
-#### Titel (2)
+#### Label (2)
Wähle einen kurzen und aussagekräftigen Titel, den die Nutzer\*innen schnell erfassen können. Der Titel und das Icon sind die Steuerelemente zum Öffnen des Inhalts.
-#### Text (3)
+#### Ausgeklappter Text Inhalt (3)
Du kannst sowohl einen einfachen Fließtext als auch Überschriften einfügen, Texte in Absätze einteilen und Bilder oder Illustrationen hinzufügen. Der Text sollte so einfach und verständlich wie möglich sein.
diff --git a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md
index 76f9ee194c..067241f550 100644
--- a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md
+++ b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb.md
@@ -9,7 +9,7 @@ A breadcrumb is a secondary navigation element that provides additional orientat
A breadcrumb reflects the information hierarchy of your product or service. The first entry is typically the site's homepage; the last entry is the current page.
-![Image Name](assets/3_components/breadcrumb/breadcrumb-general.png)
+![Image Name](assets/3_components/breadcrumb/breadcrumb.png)
### When to use
@@ -21,7 +21,7 @@ If your product or service has a flat architecture with only one or two levels o
## Elements
-![Image Name](assets/3_components/breadcrumb/elements.png)
+![Image Name](assets/3_components/breadcrumb/Elements.png)
#### Page links (1)
diff --git a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md
index 1be6072ef2..b5e1644fac 100644
--- a/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md
+++ b/packages/storybook-vue/stories/components/breadcrumb/breadcrumb_de.md
@@ -9,7 +9,7 @@ Die Breadcrumb ist ein sekundäres Navigationselement, das zusätzliche Orientie
Die Breadcrumb spiegelt die Informationshierarchie des Produkts oder Services wider. Der erste Punkt ist in der Regel die Startseite der Webseite, der letzte Punkt die aktuelle Seite.
-![Image Name](assets/3_components/breadcrumb/breadcrumb-general.png)
+![Image Name](assets/3_components/breadcrumb/breadcrumb.png)
### Verwende die Breadcrumb
@@ -23,7 +23,7 @@ Die Breadcrumb spiegelt die Informationshierarchie des Produkts oder Services wi
## Elemente
-![Image Name](assets/3_components/breadcrumb/elements.png)
+![Image Name](assets/3_components/breadcrumb/Elements.png)
#### Links (1)
diff --git a/packages/storybook-vue/stories/components/button/button.md b/packages/storybook-vue/stories/components/button/button.md
index ee3b01c5b6..48bfc37602 100644
--- a/packages/storybook-vue/stories/components/button/button.md
+++ b/packages/storybook-vue/stories/components/button/button.md
@@ -9,7 +9,7 @@ Buttons offer the most important interaction options on the user interface. The
We provide two button types to support a clear visual hierarchy. Using icons creates an additional point of emphasis. Select the button type and variant based on the context.
-![Image Name](assets/3_components/button/Button_BasicTypes.png)
+![Image Name](assets/3_components/button/button.png)
### When to use
@@ -35,6 +35,14 @@ The secondary button has less emphasis than the main call to action. Use it for
![Image Name](assets/3_components/button/Button_Secondary.png)
+### Secondary White
+
+![Image Name](assets/3_components/button/button-secondary-white.png)
+
+### Ghost Button
+
+![Image Name](assets/3_components/button/button-ghost.png)
+
## Variants
### Text only
@@ -59,13 +67,13 @@ In certain cases, you can also use an icon without text, for example when space
We typically use the large button to ensure a good visual balance between the content and button. In special cases, you might not have enough space, so we also offer a smaller variant.
-![Image Name](assets/3_components/button/Button_Sizes.png)
+![Image Name](assets/3_components/button/button-sizes.png)
## Disabled state
When disabled, the interactive function of the button is removed. Use this state if an interaction is not allowed due to permissions or dependencies.
-![Image Name](assets/3_components/button/Button_Disabled.png)
+![Image Name](assets/3_components/button/button-disabled.png)
> The disabled state is exempt from the WCAG contrast minimum for text colors. You can find more information in the [WCAG guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum).
@@ -90,13 +98,13 @@ To learn more about the usage and construction of our interface icons, read our
If buttons are directly related to each other, align them as a group. Use only one primary button for each button group.
In processes and modal dialogs, buttons are aligned to the right to indicate progress. The button farthest to the right is the primary button; the secondary button is placed on the left. In forms, we align buttons to the left side of the form content. The primary button is placed on the left and the secondary button on the right.
-![Image Name](assets/3_components/button/ButtonGroup_Modal.png)
+![Image Name](assets/3_components/button/button-best-practice.png)
### Icon & text label
Icons make it easier to grasp information when positioned in the right place. Following the direction of reading, we place icons to the left of the text label. However, there is one exception: a Next button with an arrow. In this case, we place the icon on the right side to help people process the information intuitively.
-![Image Name](assets/3_components/button/Button_Icon_position.png)
+![Image Name](assets/3_components/button/button-best-practice2.png)
## Related components
diff --git a/packages/storybook-vue/stories/components/button/button_de.md b/packages/storybook-vue/stories/components/button/button_de.md
index 83cd3298b2..b07494a938 100644
--- a/packages/storybook-vue/stories/components/button/button_de.md
+++ b/packages/storybook-vue/stories/components/button/button_de.md
@@ -9,7 +9,7 @@ Der Button ist das wichtigste Interaktionselement eines User Interfaces. Per Kli
Es gibt zwei Basistypen und drei Varianten, um eine klare visuelle Hierarchie herzustellen. Mit der Verwendung eines passenden Icons kannst du die Funktion eines Buttons zusätzlich verdeutlichen. Wähle Button-Typ und -Variante passend für den jeweiligen Kontext aus.
-![Image Name](assets/3_components/button/Button_BasicTypes.png)
+![Image Name](assets/3_components/button/button.png)
### Verwende einen Button, wenn
@@ -38,6 +38,14 @@ Der Sekundär-Button ist weniger auffällig. Nutze ihn für alle weiteren Aktion
![Image Name](assets/3_components/button/Button_Secondary.png)
+### Sekundär-Button Weiß
+
+![Image Name](assets/3_components/button/button-secondary-white.png)
+
+### Ghost Button
+
+![Image Name](assets/3_components/button/button-ghost.png)
+
## Varianten
### Button mit Text
@@ -62,13 +70,13 @@ In manchen Fällen kannst du auch ein Icon ohne Text verwenden. Das ist zum Beis
Nutze den großen Button, um eine gute visuelle Balance zwischen Inhalt und Button zu erreichen. Wenn nur wenig Platz zur Verfügung steht, kannst du die kleinere Variante verwenden.
-![Image Name](assets/3_components/button/Button_Sizes.png)
+![Image Name](assets/3_components/button/button-sizes.png)
## Deaktivierter Zustand
Im deaktivierten Zustand ist die interaktive Funktion des Buttons ausgeschaltet. Verwende diesen Zustand, wenn eine Interaktion aufgrund von Berechtigungen oder Abhängigkeiten nicht erfolgen kann.
-![Image Name](assets/3_components/button/Button_Disabled.png)
+![Image Name](assets/3_components/button/button-disabled.png)
> Der deaktivierte Zustand (Disabled State) ist vom Kontrastminimum der WCAG für Textfarben ausgenommen. Weitere Informationen hierzu findest du in den [Richtlinien der WCAG](https://www.w3.org/TR/WCAG21/#contrast-minimum).
@@ -94,13 +102,13 @@ Stehen Buttons in direkter Beziehung zueinander, dann ordne sie als Gruppe an. W
In Prozessen und modalen Dialogen sind Buttons rechtsbündig angeordnet, um den Fortschritt anzuzeigen. Platziere den Primär-Button rechts und den Sekundär-Button links. Bei Formularen sind Buttons linksbündig am Inhalt ausgerichtet. Hier setzt du den Primär-Button links und den Sekundär-Button rechts.
-![Image Name](assets/3_components/button/ButtonGroup_Modal.png)
+![Image Name](assets/3_components/button/button-best-practice.png)
### Anordnung von Icon und Label
Icons erleichtern das Erfassen von Informationen, wenn sie an der richtigen Stelle positioniert sind. Der Leserichtung folgend setzen wir Icons demnach links neben dem Label ein. Es gibt eine Ausnahme: Der Weiter-Button mit einem Pfeil. In diesem Fall positionierst du das Icon rechts, um das intuitive Erfassen der Information zu erleichtern.
-![Image Name](assets/3_components/button/Button_Icon_position.png)
+![Image Name](assets/3_components/button/button-best-practice2.png)
## Verwandte Komponenten
diff --git a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md
index 954176a0f7..51e96d27e5 100644
--- a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md
+++ b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group.md
@@ -9,7 +9,7 @@ A checkbox group combines checkboxes with related selection options to form a gr
Clicking on the parent checkbox activates or deactivates a checkbox group. By grouping the content of checkboxes and describing the group, you can present contextual relationships to users more quickly. Interfaces with many options appear smoother and tidier overall.
-![Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group.png)
+![Checkbox Group](assets/3_components/checkbox-group/checkbox-group.png)
### When to use
@@ -26,7 +26,7 @@ Don't use a checkbox group when:
## Elements
-![Elements of Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group_Elements.png)
+![Elements of Checkbox Group](assets/3_components/checkbox-group/Elements.png)
#### Parent checkbox (indeterminate state) (1)
@@ -56,18 +56,18 @@ If a mandatory option isn't activated (e.g., when it's required to carry out the
If an error message affects the entire group, place it below the group label.
-## Deactivated state
+## Disabled state
-A checkbox group or an individual checkbox is deactivated if:
+A checkbox group or an individual checkbox is disabled if:
- users have to take another action before using the checkbox or
- the option must be listed but users can't currently select it.
-The deactivated state of the entire group occurs automatically when all individual checkboxes are deactivated.
+The disabled state of the entire group occurs automatically when all individual checkboxes are disabled.
-![A deactivated checkbox group](assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_EN.png)
+![A disabled checkbox group](assets/3_components/checkbox-group/checkbox-group-disabled-en.png)
-![A deactivated checkbox](assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_EN.png)
+![A disabled checkbox](assets/3_components/checkbox-group/checkbox-group-disabled-single-en.png)
> The disabled state is exempt from the WCAG contrast minimum for text colors. You can find more information in the [WCAG guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum).
diff --git a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md
index 1683b18248..0c1947bf04 100644
--- a/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md
+++ b/packages/storybook-vue/stories/components/checkbox-group/checkbox-group_de.md
@@ -9,7 +9,7 @@ Eine Checkbox Group fasst Checkboxen mit verwandten Auswahloptionen zu einer Gru
Checkbox-Gruppen lassen sich mit einem Klick auf die übergeordnete Checkbox aktivieren oder deaktivieren. Durch die inhaltliche Gruppierung von Checkboxen und die Beschreibung der Gruppe erfassen Nutzer\*innen inhaltliche Zusammenhänge schneller. Interfaces mit vielen Auswahloptionen wirken insgesamt ruhiger und aufgeräumter.
-![Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group.png)
+![Checkbox Group](assets/3_components/checkbox-group/checkbox-group.png)
### Verwende eine Checkbox Group, wenn
@@ -22,7 +22,7 @@ Checkbox-Gruppen lassen sich mit einem Klick auf die übergeordnete Checkbox akt
## Elemente
-![Elements of Checkbox Group](assets/3_components/checkbox-group/Checkbox_Group_Elements.png)
+![Elements of Checkbox Group](assets/3_components/checkbox-group/Elements.png)
#### Übergeordnete Checkbox (unbestimmter Zustand) (1)
@@ -61,9 +61,9 @@ Eine Checkbox-Gruppe oder eine einzelne Checkbox ist deaktiviert, wenn
Dabei ergibt sich der deaktivierte Zustand der gesamten Gruppe automatisch, wenn alle einzelnen Checkboxen deaktiviert sind.
-![Eine deaktivierte Checkbox-Gruppe](assets/3_components/checkbox-group/Checkbox_Group_Disabled_State_DE.png)
+![Eine deaktivierte Checkbox-Gruppe](assets/3_components/checkbox-group/checkbox-group-disabled-de.png)
-![Eine deaktivierte Checkbox](assets/3_components/checkbox-group/Checkbox_Group_single_Disabled_State_DE.png)
+![Eine deaktivierte Checkbox](assets/3_components/checkbox-group/checkbox-group-disabled-single-de.png)
> Der deaktivierte Zustand (Disabled State) ist vom Kontrastminimum der WCAG für Textfarben ausgenommen. Weitere Informationen hierzu findest du in den [Richtlinien der WCAG](https://www.w3.org/TR/WCAG21/#contrast-minimum).
diff --git a/packages/storybook-vue/stories/components/chip/chip.md b/packages/storybook-vue/stories/components/chip/chip.md
index fe45da91ee..1d041e6cfd 100644
--- a/packages/storybook-vue/stories/components/chip/chip.md
+++ b/packages/storybook-vue/stories/components/chip/chip.md
@@ -26,18 +26,18 @@ Don’t use chips when:
## Basic types
-![Image Name](assets/3_components/chip/Chips-Types.png)
+![Image Name](assets/3_components/chip/chip-types.png)
### Persistent chips
Persistent chips are an integral part of the UI and can be selected and deselected.
-![Image Name](assets/3_components/chip/Chips-Persistent-Default.png)
+![Image Name](assets/3_components/chip/chip-persistent-default.png)
**Example 1 – Default**
A group of filter options as an integral part of the UI.
-![Image Name](assets/3_components/chip/Chips-Persistent-Selected.png)
+![Image Name](assets/3_components/chip/chip-persistent-selected.png)
**Example 1 – Filter selected**
Users can recognize selected filters with the checkmark icon.
@@ -46,31 +46,31 @@ Users can recognize selected filters with the checkmark icon.
Dynamic chips fade in or out after a user action.
-![Image Name](assets/3_components/chip/Chips-Dynamic-Example1.png)
+![Image Name](assets/3_components/chip/chip-dynamic.png)
**Example 1**
The chip appears after users set a filter. Clicking/tapping on the close icon hides it again and resets the filter.
-![Image Name](assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png)
+![Image Name](assets/3_components/chip/chip-dynamic-chatbot.png)
**Example 2**
A set of possible responses in a chat. After clicking/tapping on the chip, it fades out again.
## Variants
-![Image Name](assets/3_components/chip/Standard_Chip.png)
+![Image Name](assets/3_components/chip/chip-standard.png)
Chips can be displayed in two variants: standard and outline.
### Disabled state
-![Image Name](assets/3_components/chip/chips-disabled-en.png)
+![Image Name](assets/3_components/chip/chip-disabled-en.png)
In the disabled state, the chip's interactive function is switched off. Use this state when an interaction can’t occur due to permissions or dependencies.
### Element
-![Image Name](assets/3_components/chip/Chips-elements.png)
+![Image Name](assets/3_components/chip/Elements.png)
#### Label (1)
diff --git a/packages/storybook-vue/stories/components/chip/chip_de.md b/packages/storybook-vue/stories/components/chip/chip_de.md
index 882f01c388..54189fea4f 100644
--- a/packages/storybook-vue/stories/components/chip/chip_de.md
+++ b/packages/storybook-vue/stories/components/chip/chip_de.md
@@ -22,18 +22,18 @@ Chips bestehen aus relevanten Schlüsselwörtern in einem Container. Sie erschei
## Basistypen
-![Image Name](assets/3_components/chip/Chips-Types.png)
+![Image Name](assets/3_components/chip/chip-types.png)
### Persistente Chips
Persistente Chips sind fester Bestandteil des UIs und lassen sich aus- und abwählen.
-![Image Name](assets/3_components/chip/Chips-Persistent-Default.png)
+![Image Name](assets/3_components/chip/chip-persistent-default.png)
**Beispiel 1 – Default**
Eine Gruppe von Filtermöglichkeiten als fester Bestandteil des UI
-![Image Name](assets/3_components/chip/Chips-Persistent-Selected.png)
+![Image Name](assets/3_components/chip/chip-persistent-selected.png)
**Beispiel 2 - Filter ausgewählt**
Ausgewählte Filter erkennen Nutzer\*innen am Checkmark Icon.
@@ -42,31 +42,31 @@ Ausgewählte Filter erkennen Nutzer\*innen am Checkmark Icon.
Dynamische Chips blenden sich nach einer Aktion der Nutzer\*innen ein oder aus.
-![Image Name](assets/3_components/chip/Chips-Dynamic-Example1.png)
+![Image Name](assets/3_components/chip/chip-dynamic.png)
**Beispiel 1**
Der Chip blendet sich ein, nachdem Nutzer\*innen einen Filter gesetzt haben. Per Klick/Tap auf das Schließen-Icon blendet er sich wieder aus und der Filter ist zurückgesetzt.
-![Image Name](assets/3_components/chip/Chips-Dynamic-Example_Chatbot2.png)
+![Image Name](assets/3_components/chip/chip-dynamic-chatbot.png)
**Beispiel 2**
Eine Gruppe von Antwortmöglichkeiten in einem Chat. Nach Klick/Tap auf den Chip blendet er sich wieder aus.
## Varianten
-![Image Name](assets/3_components/chip/Standard_Chip.png)
+![Image Name](assets/3_components/chip/chip-standard.png)
Chips lassen sich in zwei Varianten darstellen: Standard und Outline.
### Deaktivierter Zustand
-![Image Name](assets/3_components/chip/chips-disabled-de.png)
+![Image Name](assets/3_components/chip/chip-disabled-de.png)
Im deaktivierten Zustand ist die interaktive Funktion des Chips ausgeschaltet. Verwende diesen Zustand, wenn eine Interaktion aufgrund von Berechtigungen oder Abhängigkeiten nicht möglich ist.
### Elemente
-![Image Name](assets/3_components/chip/Chips-elements.png)
+![Image Name](assets/3_components/chip/Elements.png)
#### Label (1)
diff --git a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md
index 08f112efe0..fb39f78814 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md
+++ b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select.md
@@ -9,7 +9,7 @@ With a dropdown, users select a single option from a collapsible list of availab
The dropdown temporarily displays a selection list. Thus, the dropdown helps save space when there are multiple options to choose from.
-![Image Name](assets/3_components/dropdown-select/Dropdown_select.png)
+![Image Name](assets/3_components/dropdown-select/dropdown-select.png)
### When to use
@@ -30,7 +30,7 @@ Don’t use dropdowns, when users:
## Elements
-![Image Name](assets/3_components/dropdown-select/Dropdown_select_elements.png)
+![Image Name](assets/3_components/dropdown-select/Elements.png)
### Label (1)
diff --git a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md
index 14abbbb7b3..a5f78002f1 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md
+++ b/packages/storybook-vue/stories/components/dropdown-select/dropdown-select_de.md
@@ -9,7 +9,7 @@ Mit einem Dropdown wählen Nutzer\*innen eine Option aus einer Liste aus.
Die Auswahlliste des Dropdowns wird temporär angezeigt. Das macht ein Dropdown zu einer platzsparenden Lösung, wenn viele Optionen zur Auswahl stehen.
-![Image Name](assets/3_components/dropdown-select/Dropdown_select.png)
+![Image Name](assets/3_components/dropdown-select/dropdown-select.png)
### Verwende ein Dropdown, wenn
@@ -26,7 +26,7 @@ Die Auswahlliste des Dropdowns wird temporär angezeigt. Das macht ein Dropdown
## Elemente
-![Image Name](assets/3_components/dropdown-select/Dropdown_select_elements.png)
+![Image Name](assets/3_components/dropdown-select/Elements.png)
### Label (1)
diff --git a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md
index 045665dbb9..b117360f18 100644
--- a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md
+++ b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout.md
@@ -9,7 +9,7 @@ Flyout menus can appear temporarily. This gives users access to a range of funct
Clicking/tapping a button opens the flyout menu. It can contain different elements.
-![Flyout Menu](assets/3_components/flyout-menu/Flyout_Menu.png)
+![Flyout Menu](assets/3_components/flyout-menu/flyout-menu.png)
### When to use
@@ -26,7 +26,7 @@ Don't use a flyout menu for:
## Elements
-![Elements of Flyout Menu](assets/3_components/flyout-menu/Flyout_Menu_Elements.png)
+![Elements of Flyout Menu](assets/3_components/flyout-menu/Elements.png)
#### Trigger (1)
diff --git a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md
index 6f54d35a8b..26eeb0d0b2 100644
--- a/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md
+++ b/packages/storybook-vue/stories/components/flyout-menu/menu-flyout_de.md
@@ -9,7 +9,7 @@ Flyout Menus lassen sich temporär einblenden. Nutzer\*innen können so auf eine
Das Flyout Menu öffnet sich per Klick/Tap auf einen Button. Es kann unterschiedliche Elemente enthalten.
-![Flyout Menu](assets/3_components/flyout-menu/Flyout_Menu.png)
+![Flyout Menu](assets/3_components/flyout-menu/flyout-menu.png)
### Nutze das Flyout Menu, um
@@ -22,7 +22,7 @@ Das Flyout Menu öffnet sich per Klick/Tap auf einen Button. Es kann unterschied
## Elemente
-![Elements des Flyout Menus](assets/3_components/flyout-menu/Flyout_Menu_Elements.png)
+![Elements des Flyout Menus](assets/3_components/flyout-menu/Elements.png)
#### Trigger (1)
diff --git a/packages/storybook-vue/stories/components/list/list.md b/packages/storybook-vue/stories/components/list/list.md
index b1b102bffe..6e58f3faae 100644
--- a/packages/storybook-vue/stories/components/list/list.md
+++ b/packages/storybook-vue/stories/components/list/list.md
@@ -9,7 +9,7 @@ A list arranges related pieces of information in a vertical group. This makes it
You can choose between an ordered, unordered, or definition list.
-![Image Name](assets/3_components/text-list/text-list_general.png)
+![Image Name](assets/3_components/text-list/text-list-general.png)
### When to use
@@ -30,21 +30,13 @@ Emotionally charged content is not suitable to present as a list.
You can convey a specific hierarchy by using an ordered list. The list items follow a series. Indent items to display subordinate information.
-![Image Name](assets/3_components/text-list/ordered_list.png)
+![Image Name](assets/3_components/text-list/text-list-detail-ordered.png)
### Unordered list
The items of an unordered list have equal status. The list will not convey a specific order. Nevertheless, you should organize the items in a logical way that users can easily understand (e.g., alphabetically or chronologically). Even if there is no specific order, you can display different levels of hierarchy by indenting.
-![Image Name](assets/3_components/text-list/unordered_list.png)
-
-### Definition list
-
-> Available soon
-
-A definition list consists of terms and their definition.
-
-![Image Name](assets/3_components/text-list/definition_list.png)
+![Image Name](assets/3_components/text-list/text-list-detail-unordered.png)
## Related components
diff --git a/packages/storybook-vue/stories/components/list/list_de.md b/packages/storybook-vue/stories/components/list/list_de.md
index 4adf95631e..39273f176a 100644
--- a/packages/storybook-vue/stories/components/list/list_de.md
+++ b/packages/storybook-vue/stories/components/list/list_de.md
@@ -9,7 +9,7 @@ Eine Liste gliedert zusammengehörige Inhalte in einer vertikalen Struktur. Sie
Es gibt drei Arten von Listen: sortierte Listen, Aufzählungslisten und Definitionslisten.
-![Image Name](assets/3_components/text-list/text-list_general.png)
+![Image Name](assets/3_components/text-list/text-list-general.png)
### Nutze eine Liste, um
@@ -28,21 +28,13 @@ Es gibt drei Arten von Listen: sortierte Listen, Aufzählungslisten und Definiti
Die Liste mit Nummerierung eignet sich vor allem für Schritt-für-Schritt-Anleitungen und aufeinanderfolgende Inhalte. Du kannst Unterpunkte einfügen, die eingerückt unter den Hauptpunkten dargestellt werden.
-![Image Name](assets/3_components/text-list/ordered_list.png)
+![Image Name](assets/3_components/text-list/text-list-detail-ordered.png)
### Aufzählungsliste
Die Elemente dieser Liste sind gleichrangig. Die Liste gibt also keine Reihenfolge vor. Dennoch solltest du die Einträge in einer logischen, für Nutzer\*innen leicht verständlichen Weise organisieren (zum Beispiel alphabetisch oder chronologisch). Auch wenn es keine bestimmte Reihenfolge gibt, kannst du durch Einrücken Hierarchieebenen darstellen.
-![Image Name](assets/3_components/text-list/unordered_list.png)
-
-### Definitionsliste
-
-> Diese Funktion ist bald verfügbar.
-
-Diese Liste beinhaltet Begriffe und darunter die jeweilige Definition.
-
-![Image Name](assets/3_components/text-list/definition_list.png)
+![Image Name](assets/3_components/text-list/text-list-detail-unordered.png)
## Verwandte Komponenten
diff --git a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md
index 52bc39f8bf..645040557b 100644
--- a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md
+++ b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner.md
@@ -24,11 +24,11 @@ Don't use a loading spinner if:
Scale contains a spinner with a horizontal alignment and a vertical alignment.
-![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Varianten-EN.png)
+![Image Name](assets/3_components/loading-spinner/loading-spinner-variants-en.png)
## Elements
-![Image Name](assets/3_components/loading-spinner/Loading-spinner-elemente.png)
+![Image Name](assets/3_components/loading-spinner/Elements.png)
#### Loading symbol (1)
@@ -42,13 +42,13 @@ The description gives users a quick status of the background process.
Use the white spinner on dark backgrounds.
-![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Farben-EN.png)
+![Image Name](assets/3_components/loading-spinner/loading-spinner-colors-en.png)
## Sizes
If there isn't much space (e.g., if you use the spinner within a component), choose the small size.
-![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Groeßen-EN.png)
+![Image Name](assets/3_components/loading-spinner/loading-spinner-sizes-en.png)
## Related components
diff --git a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md
index 21ae430c10..1d6cda9adc 100644
--- a/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md
+++ b/packages/storybook-vue/stories/components/loading-spinner/loading-spinner_de.md
@@ -22,11 +22,11 @@ Ein Loading Spinner ist ein kreisförmiges Symbol, das sich in Dauerschleife dre
Scale enthält einen horizontal und einen vertikal ausgerichteten Spinner.
-![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Varianten-DE.png)
+![Image Name](assets/3_components/loading-spinner/loading-spinner-variants-de.png)
## Elemente
-![Image Name](assets/3_components/loading-spinner/Loading-spinner-elemente.png)
+![Image Name](assets/3_components/loading-spinner/Elements.png)
#### Loading-Symbol (1)
@@ -40,13 +40,13 @@ Die Beschreibung gibt Nutzer\*innen ein kurzes Feedback über den Hintergrundpro
Auf dunklen Hintergründen setze den weißen Spinner ein.
-![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Farben-DE.png)
+![Image Name](assets/3_components/loading-spinner/loading-spinner-colors-de.png)
## Größen
Bei wenig Raum, bspw. wenn du den Spinner innerhalb einer Komponente einsetzt, wähle die kleine Größe.
-![Image Name](assets/3_components/loading-spinner/Loading-Spinner-Groeßen-DE.png)
+![Image Name](assets/3_components/loading-spinner/loading-spinner-sizes-de.png)
## Verwandte Komponenten
diff --git a/packages/storybook-vue/stories/components/logo/logo.md b/packages/storybook-vue/stories/components/logo/logo.md
index 83d74b39d8..ed9ef6d8fc 100644
--- a/packages/storybook-vue/stories/components/logo/logo.md
+++ b/packages/storybook-vue/stories/components/logo/logo.md
@@ -12,7 +12,7 @@ Only use the logo for the brand header and footer.
## Colors
-![Image Name](assets/3_components/logo/Farben-EN.png)
+![Image Name](assets/3_components/logo/Colors.png)
## Related components
diff --git a/packages/storybook-vue/stories/components/logo/logo_de.md b/packages/storybook-vue/stories/components/logo/logo_de.md
index 124ef42ecd..25e9a33314 100644
--- a/packages/storybook-vue/stories/components/logo/logo_de.md
+++ b/packages/storybook-vue/stories/components/logo/logo_de.md
@@ -12,7 +12,7 @@ Verwende das Logo ausschließlich für den Brand-Header und Footer.
## Farben
-![Image Name](assets/3_components/logo/Farben-DE.png)
+![Image Name](assets/3_components/logo/Colors.png)
## Verwandte Komponenten
diff --git a/packages/storybook-vue/stories/components/modal/modal.md b/packages/storybook-vue/stories/components/modal/modal.md
index 8ea984eef6..469ce84e13 100644
--- a/packages/storybook-vue/stories/components/modal/modal.md
+++ b/packages/storybook-vue/stories/components/modal/modal.md
@@ -58,9 +58,9 @@ To frame the scrollable area, an overlay highlights the action bar. A divider ap
For desktops, modals come in sizes S, L, or XL and span 6, 8, or 12 columns, respectively. Select the modal size that best fits the amount of content for your use case.
-![Image Name](assets/3_components/modal/desktop_12columns.png)
-![Image Name](assets/3_components/modal/desktop_8columns.png)
-![Image Name](assets/3_components/modal/desktop_6columns.png)
+![Image Name](assets/3_components/modal/modal-large.png)
+![Image Name](assets/3_components/modal/modal-medium.png)
+![Image Name](assets/3_components/modal/modal-small.png)
### Mobile
diff --git a/packages/storybook-vue/stories/components/modal/modal_de.md b/packages/storybook-vue/stories/components/modal/modal_de.md
index c55eae90cc..6cd559ed79 100644
--- a/packages/storybook-vue/stories/components/modal/modal_de.md
+++ b/packages/storybook-vue/stories/components/modal/modal_de.md
@@ -54,9 +54,9 @@ Ein Overlay grenzt den Aktionsbereich vom scrollbaren Bereich ab. Unter dem Tite
Für Desktop-Anwendungen stehen modale Dialoge in den Größen S, L oder XL zur Verfügung. Sie umfassen jeweils 6, 8 oder 12 Spalten. Wähle die Größe, die am besten zur Menge des Inhalts und den jeweiligen Anwendungsfall passt.
-![Image Name](assets/3_components/modal/desktop_12columns.png)
-![Image Name](assets/3_components/modal/desktop_8columns.png)
-![Image Name](assets/3_components/modal/desktop_6columns.png)
+![Image Name](assets/3_components/modal/modal-large.png)
+![Image Name](assets/3_components/modal/modal-medium.png)
+![Image Name](assets/3_components/modal/modal-small.png)
### Mobil
diff --git a/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx b/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx
index 259598b831..53e5a7e369 100644
--- a/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx
+++ b/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx
@@ -150,8 +150,6 @@ export const TemplateEmbedded = (args, { argTypes }) => ({
-### Properties
-
## Standard