Skip to content

Commit a97e529

Browse files
fern-api[bot]fern-api[bot]
authored
Fern Editor: Update
1 parent 26e835b commit a97e529

File tree

1 file changed

+73
-72
lines changed

1 file changed

+73
-72
lines changed

‎fern/products/docs/pages/component-library/default-components/accordion-groups.mdx‎

Lines changed: 73 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,105 @@
11
---
2-
title: 'Accordion Groups'
3-
description: 'Display expandable/collapsible options that reveal more information with improved search functionality'
2+
title: Accordion Groups
3+
description: Display expandable/collapsible options that reveal more information with improved search functionality
44
---
55

66
Accordion Groups allow you to organize content into collapsible sections, making it easier for users to navigate through information. With recent updates, our Accordion component now supports improved search functionality using the browser's built-in search feature.
77

88
<AccordionGroup>
99
<Accordion title="Basic usage">
10-
Accordion Groups can contain multiple Accordion items. Each item has a title and content that can be expanded or collapsed.
11-
12-
```jsx
13-
<AccordionGroup>
14-
<Accordion title="Section 1">
15-
Content for section 1
16-
</Accordion>
17-
<Accordion title="Section 2">
18-
Content for section 2
19-
</Accordion>
20-
</AccordionGroup>
21-
```
10+
Accordion Groups can contain multiple Accordion items. Each Accordion has a title and content that can be expanded or collapsed.
11+
12+
```
13+
<AccordionGroup>
14+
<Accordion title="Section 1">
15+
Content for section 1
16+
</Accordion>
17+
<Accordion title="Section 2">
18+
Content for section 2
19+
</Accordion>
20+
</AccordionGroup>
21+
```
22+
2223
</Accordion>
2324

2425
<Accordion title="Searchable content">
25-
The updated Accordion component now uses HTML5 `<details>` and `<summary>` elements, enabling browser search (Cmd+F / Ctrl+F) to find content within collapsed sections.
26+
Accordion components use HTML5 `<details>` and `<summary>` elements, enabling browser search (Cmd+F / Ctrl+F) so users can find content within collapsed sections.
27+
2628
</Accordion>
2729

2830
<Accordion title="Accessibility">
29-
Our Accordion component is built with accessibility in mind, supporting keyboard navigation and screen readers.
31+
The Accordion component supports keyboard navigation and screen readers.
3032
</Accordion>
3133
</AccordionGroup>
3234

33-
### Enhanced search functionality
34-
35-
The recent update to our Accordion component improves content discoverability by allowing users to search through all content, including collapsed sections, using the browser's search function (Cmd+F / Ctrl+F).
3635

3736
### Usage examples
3837

39-
Here are some examples of how to use the Accordion Group component:
40-
4138
<Tabs>
4239
<Tab title="Example">
4340
<AccordionGroup>
44-
<Accordion title="Simple text content">
45-
This is a basic example with text content.
46-
</Accordion>
47-
48-
<Accordion title="With code snippets">
49-
You can include code snippets within Accordions:
41+
<Accordion title="Simple text content">
42+
This is a basic example with text content.
43+
</Accordion>
44+
<Accordion title="Text content with multimedia">
45+
You can embed images, videos, and other media within accordions for rich interactive content.
46+
47+
<embed
48+
src="./growing-fern.mp4"
49+
type="video/mp4"
50+
width="640"
51+
height="360"
52+
/>
53+
</Accordion>
54+
<Accordion title="Nested components">
55+
Accordions can contain other components, such as code blocks and callouts.
5056

51-
```javascript
52-
function greet(name) {
53-
console.log(`Hello, ${name}!`);
54-
}
55-
```
56-
</Accordion>
57+
```ts
58+
export function greet(name: string) {
59+
return `Hello, ${name}!`;
60+
}
61+
```
5762

58-
<Accordion title="Nested components">
59-
Accordions can contain other components:
63+
<Note>
64+
Here's a nested callout.
65+
</Note>
6066

61-
<Frame caption="Sample image">
62-
<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
63-
</Frame>
64-
</Accordion>
67+
</Accordion>
6568
</AccordionGroup>
69+
6670
</Tab>
6771
<Tab title="Markdown">
68-
<CodeBlock title="Example usage">
72+
<CodeBlock>
6973
````jsx
70-
<AccordionGroup>
71-
<Accordion title="Text example">
72-
This is a basic example of an accordion group.
73-
</Accordion>
74-
75-
<Accordion title="Multimedia example">
76-
You can embed photos, videos, and other media within accordions for rich interactive content.
77-
78-
<embed
79-
src="./growing-fern.mp4"
80-
type="video/mp4"
81-
width="640"
82-
height="360"
83-
/>
84-
</Accordion>
85-
86-
<Accordion title="Rich content support">
87-
Accordions can contain rich content including code blocks, callouts, and other components.
88-
89-
```ts
90-
export function greet(name: string) {
91-
return `Hello, ${name}!`;
92-
}
93-
```
94-
</Accordion>
95-
96-
<Accordion title="Best practices using Accordion Groups">
97-
- Use accordion groups when you have multiple related sections
98-
- Each accordion should have a clear title
99-
- Keep content concise and focused
100-
</Accordion>
101-
</AccordionGroup>
74+
<AccordionGroup>
75+
<Accordion title="Simple text content">
76+
This is a basic example with text content.
77+
</Accordion>
78+
<Accordion title="Text content with multimedia">
79+
You can embed images, videos, and other media within accordions for rich interactive content.
80+
81+
<embed
82+
src="./growing-fern.mp4"
83+
type="video/mp4"
84+
width="640"
85+
height="360"
86+
/>
87+
</Accordion>
88+
<Accordion title="Nested components">
89+
Accordions can contain other components, such as code blocks and callouts.
90+
91+
```ts
92+
export function greet(name: string) {
93+
return `Hello, ${name}!`;
94+
}
95+
```
96+
97+
<Note>
98+
Here's a nested callout.
99+
</Note>
100+
101+
</Accordion>
102+
</AccordionGroup>
102103
````
103104
</CodeBlock>
104105
</Tab>

0 commit comments

Comments
 (0)