From 9863059e971e08483592098877ed251fd81c9c02 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Tue, 22 Jul 2025 18:01:30 -0700
Subject: [PATCH] update accordion page
---
components/accordions.mdx | 86 ++++++++++++++++++---------------------
1 file changed, 40 insertions(+), 46 deletions(-)
diff --git a/components/accordions.mdx b/components/accordions.mdx
index 18379a4c9..b7f7c50a7 100644
--- a/components/accordions.mdx
+++ b/components/accordions.mdx
@@ -1,9 +1,13 @@
---
title: "Accordions"
-description: "A dropdown component to toggle content visibility"
+description: "Collapsible components to show and hide content"
icon: "chevron-down"
---
+Accordions allow users to expand and collapse content sections. Use accordions for progressive disclosure and to organize information.
+
+## Single accordion
+
You can put any content in here, including other components, like code:
```java HelloWorld.java
@@ -15,9 +19,7 @@ icon: "chevron-down"
```
-
-
-````mdx Accordion Example
+````mdx Accordion example
You can put any content in here, including other components, like code:
@@ -31,9 +33,12 @@ icon: "chevron-down"
````
-````mdx Accordion Group Example
+## Accordion Groups
+
+Group related accordions together using ``. This creates a cohesive section of accordions that can be individually expanded or collapsed.
+
-
+
You can put other components inside Accordions.
```java HelloWorld.java
@@ -43,23 +48,42 @@ icon: "chevron-down"
}
}
```
+
+
+
+ Add icons to make accordions more visually distinct and scannable.
+
+
+
+ Keep related content organized into groups.
+
+
+
+````mdx Accordion Group Example
+
+
+ You can put other components inside Accordions.
- Check out the [Accordion](/components/accordions) docs for all the supported props.
+ ```java HelloWorld.java
+ class HelloWorld {
+ public static void main(String[] args) {
+ System.out.println("Hello, World!");
+ }
+ }
+ ```
-
- Check out the [Accordion](/components/accordions) docs for all the supported props.
+
+ Add icons to make accordions more visually distinct and scannable.
-
- Check out the [Accordion](/components/accordions) docs for all the supported props.
+
+ Keep related content organized into groups.
````
-
-
-### Props
+## Properties
Title in the Accordion preview.
@@ -75,39 +99,9 @@ icon: "chevron-down"
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
- icon](https://lucide.dev/icons), or SVG code
+ icon](https://lucide.dev/icons), or SVG code.
- One of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or
- "brands"
+ For Font Awesome icons, one of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or "brands".
-
-## Accordion Groups
-
-You can group multiple accordions into a single display. Simply add `` around your existing `` components.
-
-
-
- You can put other components inside Accordions.
-
- ```java HelloWorld.java
- class HelloWorld {
- public static void main(String[] args) {
- System.out.println("Hello, World!");
- }
- }
- ```
-
- Check out the [Accordion](/components/accordions) docs for all the supported props.
-
-
-
-
- Check out the [Accordion](/components/accordions) docs for all the supported props.
-
-
-
- Check out the [Accordion](/components/accordions) docs for all the supported props.
-
-