You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: fern/products/docs/pages/component-library/default-components/accordions.mdx
+59-12Lines changed: 59 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,33 +1,81 @@
1
1
---
2
-
title: 'Accordions'
3
-
description: 'Expand or collapse to reveal more information'
2
+
title: Accordions
3
+
description: Display expandable/collapsible options with browser search functionality
4
4
---
5
5
6
-
The Accordion component allows you to create expandable sections in your documentation. Content within accordions is searchable using browser search (cmd+f) even when collapsed. The component is optimized for SEO with server-side HTML generation, ensuring search engines can properly index all content within accordions.
6
+
The Accordion component creates expandable sections with searchable, SEO-friendly content that remains accessible even when collapsed.
7
7
8
-
<Accordiontitle='Single accordion'>
9
-
This is an example of an accordion component. When clicked, it expands to reveal this additional content.
10
-
</Accordion>
8
+
<divclassName="highlight-frame">
9
+
<AccordionGroup>
10
+
<Accordiontitle="Section 1"defaultOpen={true}>
11
+
Content for section 1, expanded by default
12
+
</Accordion>
13
+
<Accordiontitle="Section 2">
14
+
Content for section 2
15
+
</Accordion>
16
+
</AccordionGroup>
17
+
</div>
11
18
12
19
## Usage
13
20
21
+
You can have single Accordions, or multiple Accordions enclosed in an Accordion Group.
22
+
23
+
```jsx Markdown syntax
24
+
<AccordionGroup>
25
+
<Accordion title="Section 1" defaultOpen={true}>
26
+
Content for section 1, expanded by default
27
+
</Accordion>
28
+
<Accordion title="Section 2">
29
+
Content for section 2
30
+
</Accordion>
31
+
</AccordionGroup>
32
+
```
33
+
34
+
## Variants
35
+
36
+
Within each Accordion, you can embed images, videos, and other components (Callouts, Code Blocks, etc) within accordions for rich interactive content.
<Accordion title='Accordion open by default' defaultOpen={true}>
25
-
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
73
+
Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
26
74
</Accordion>
27
75
28
76
```jsx
29
77
<Accordion title='Accordion open by default' defaultOpen={true}>
30
-
You can use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
78
+
Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
31
79
</Accordion>
32
80
```
33
81
@@ -45,4 +93,3 @@ The Accordion component allows you to create expandable sections in your documen
45
93
Whether the accordion should be open when the page loads. If not specified, the accordion will be collapsed by default.
Copy file name to clipboardExpand all lines: fern/products/docs/pages/component-library/default-components/anchor.mdx
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,22 +3,22 @@ title: Anchor
3
3
description: Create linkable anchors for paragraphs, tables, and other content without headings
4
4
---
5
5
6
-
Use the `<Anchor>` component to create links to specific paragraphs, tables, and other sections of content that don't have headings. Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, which you can link to in URLs using the hash symbol (example: `https://website.com/page#data`).
6
+
The Anchor component creates links to specific paragraphs, tables, and other sections of content that don't have headings.
7
7
8
8
<Note>
9
9
Headings automatically generate anchor links based on their text content, so you don't need to use the `<Anchor>` component for headings.
10
10
</Note>
11
11
12
-
<Anchorid="data">This sentence has a custom anchor</Anchor>
13
-
14
-
You can link to it using `#data` in the URL.
15
-
16
12
## Usage
17
13
18
-
```jsx
19
-
<Anchor id="data">This sentence has a custom anchor</Anchor>
14
+
Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, which you can link to in URLs using the hash symbol (example: `https://website.com/page#data`).
15
+
16
+
<divclassName="highlight-frame">
17
+
<Anchorid="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
18
+
</div>
20
19
21
-
You can link to it using `#data`in the URL.
20
+
```jsx Markdown syntax
21
+
<Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via thisURL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
0 commit comments