feat: add drawback sections

content/en/patterns/content-management/accordion.mdx

@@ -45,6 +45,14 @@ Common use cases include:
 - **Enhances usability** by grouping related content.
 - **Optimizes mobile experiences** by minimizing scroll length.
 
+## Drawbacks
+
+- **Hides content by default**, requiring extra interaction to access information.
+- **Can make scanning content harder**, especially if multiple sections are collapsed.
+- **May not work well for all content types**, particularly if users need to see multiple sections at once.
+- **Can have accessibility issues** if not correctly implemented with ARIA roles.
+- **Excessive nesting** of accordions can create a poor user experience.
+
 ## Anatomy
 
 ```mermaid

content/en/patterns/content-management/carousel.mdx

@@ -47,6 +47,14 @@ Common use cases include:
 - Allows for visual storytelling and brand expression
 - Provides an interactive element for users to explore
 
+## Drawbacks
+
+- **Low engagement rates**, as users often ignore or miss slides.
+- **Performance-heavy**, especially with large images or auto-rotation.
+- **Accessibility issues**, particularly for keyboard and screen reader users.
+- **Not ideal for displaying critical content**, as users may not interact with all slides.
+- **Auto-rotation can be frustrating**, especially if there is no pause control.
+
 ## Anatomy
 
 ```mermaid

content/en/patterns/content-management/expandable-text.mdx

@@ -38,6 +38,14 @@ Expandable Text is commonly used to manage lengthy descriptions, article summari
 - **Supports progressive disclosure** – Prioritizes important content while making additional details available.
 - **Improves accessibility when properly implemented** – Ensures all users can interact with hidden content.
 
+## Drawbacks
+
+- **Hides important information** that users may need upfront.
+- **Requires an extra action** from the user, adding friction to content discovery.
+- **Can reduce searchability** since hidden text might not be indexed or easily findable.
+- If not implemented properly, it **may not be accessible** to screen readers.
+- **Unexpected layout shifts** may occur when expanding content, affecting user experience.
+
 ## Anatomy
 
 ```mermaid

content/en/patterns/content-management/modal.mdx

@@ -47,6 +47,14 @@ Use a modal when you need to **interrupt the user flow** to display important in
 - Can simplify complex workflows by breaking them into focused steps
 - Prevents interaction with the main page until a specific task is completed
 
+## Drawbacks
+
+- **Disrupts user flow**, forcing interaction before continuing with the main content.
+- **Can be difficult to dismiss**, especially if there's no clear close button.
+- **Accessibility challenges** if focus trapping and keyboard navigation are not well managed.
+- **Not ideal for mobile users**, as modals may not fit well on small screens.
+- **Overuse can lead to frustration**, particularly if used for non-essential content.
+
 ## Anatomy
 
 ```mermaid

content/en/patterns/content-management/popover.mdx

@@ -41,6 +41,14 @@ Use a popover when you need to provide context-specific information or quick act
 - Keeps the main interface uncluttered.
 - Improves discoverability of secondary actions without navigating away.
 
+## Drawbacks
+
+- **Requires precise user interaction**, which may be difficult for some users.
+- **Can obstruct other content**, making it harder to interact with the page.
+- **Often inaccessible** if not implemented with correct keyboard navigation and focus management.
+- **Positioning challenges**, especially if the popover appears off-screen.
+- **Risk of accidental dismissal**, leading to frustration if users need the information again.
+
 ## Anatomy
 
 ```mermaid

content/en/patterns/content-management/tooltip.mdx

@@ -57,6 +57,14 @@ Common use cases include:
 - **Enhances accessibility** when used correctly with keyboard and screen reader support.
 - **Provides instant feedback** without disrupting the user’s flow.
 
+## Drawbacks
+
+- Can be **difficult to trigger** on mobile devices due to the lack of hover interactions.
+- Often **overlooked by users**, especially if they don't expect additional information.
+- May **interfere with content visibility**, particularly if not positioned well.
+- Can cause **accessibility issues** if not properly implemented for keyboard and screen readers.
+- If tooltips **disappear too quickly**, users may struggle to read the content.
+
 ## Anatomy
 
 ## Anatomy

templates/patterns/component.mdx.hbs

@@ -16,6 +16,8 @@ import { BrowserSupport } from "@app/_components/browser-support";
 
 ### When to use:
 
+A sentence or two about when to use the component.
+
 **Common scenarios include:**
 
 - [Use case 1]
@@ -34,6 +36,12 @@ import { BrowserSupport } from "@app/_components/browser-support";
 - [Benefit 2]
 - [Benefit 3]
 
+## Drawbacks
+
+- [Drawback 1]
+- [Drawback 2]
+- [Drawback 3]
+
 ## Anatomy
 
 ```mermaid