From efe589b7a4a1b3da32f1b14552ed57b5d855df21 Mon Sep 17 00:00:00 2001
From: SergejLust <lust@radikant.com>
Date: Wed, 26 Jul 2023 17:26:55 +0200
Subject: [PATCH] changed image width and text

---
 .../src/components/checkbox/Usage.mdx         | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/components/checkbox/Usage.mdx b/packages/components/src/components/checkbox/Usage.mdx
index 168fa5bbce..98fc132c94 100644
--- a/packages/components/src/components/checkbox/Usage.mdx
+++ b/packages/components/src/components/checkbox/Usage.mdx
@@ -31,33 +31,37 @@ There are two different checkbox sizes: 20px and 24px. The distinction between t
 
 ## Anatomy
 <img src={CheckboxAnatomy} alt="Checkbox Anatomy" width="50%"/>
-**Checkbox input (1)**\
+**Checkbox Input (1)**\
 The checkbox input represents a specific state and is initially set as unselected by default.
 
-**Checkbox label (2)**\
+**Checkbox Label (2)**\
 Describes the information that you can choose to either select or deselect.
 
-## Mouse interaction
+## Mouse Interaction
 To select an item, users have two options: they can either directly click on the checkbox input or click on the checkbox label. By making both areas interactive, it enhances the accessibility of the click target.
-<img src={CheckboxMouseInteraction} alt="Checkbox Mouse Interaction" />
+<img src={CheckboxMouseInteraction} alt="Checkbox Mouse Interaction" width="50%" />
 
-## Grouping checkboxes
+## Grouping Checkboxes
 Deciding to place a checkbox group inline or block depends on the specific context and requirements of your user interface. 
 
 ### Inline 
-<img src={CheckboxGroupInline} alt="Checkbox Group Inline" />
+<img src={CheckboxGroupInline} alt="Checkbox Group Inline" width="50%" />
 - Use to save space when you have limited screen real estate or need to place other elements alongside the checkboxes. 
 - Use when the options in your checkbox group have short labels, an inline layout can provide a more compact and visually streamlined presentation. 
 - Use to visually group related options or indicate that they belong to the same category.
 
 ### Block
-<img src={CheckboxGroupBlock} alt="Checkbox Group Block" />
+<img src={CheckboxGroupBlock} alt="Checkbox Group Block" width="50%" />
 - Use for long checkbox labels. 
 - Use to visually separate checkbox options.
 
-## Overflow text
+## Overflow Text
 If your labels get too long, they may wrap to a second line. Generally try to avoid of having too long labels. A maximum of three words should be rule.
-<img src={CheckboxOverflowText} alt="Checkbox Overflow Text" />
+<img src={CheckboxOverflowText} alt="Checkbox Overflow Text" width="50%" />
 
 ## States
 <img src={CheckboxStates} alt="Checkbox States" />
+
+***
+Check out the Figma component: **[Checkbox](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=2583-7343&mode=design&t=VGECa2WmCtxIWNLe-4)**
+***
\ No newline at end of file