Skip to content

Commit 385a527

Browse files
authored
Website - CodeBlock guidelines revision (#2874)
1 parent 12d8833 commit 385a527

File tree

1 file changed

+2
-2
lines changed
  • website/docs/components/code-block/partials/guidelines

1 file changed

+2
-2
lines changed

website/docs/components/code-block/partials/guidelines/guidelines.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,13 @@ In the Figma component, the code examples have the appropriate number of lines b
7171

7272
## Height toggle button
7373

74-
When displaying longer code snippets, it can be helpful to let users expand and collapse the content to save space in the UI. Setting a `maxHeight` on the Code Block limits how much is shown by default. If the content exceeds this height, a **Show more code** button will be displayed at the bottom of the block, allowing users to expand it. Interacting with the button again collapses the block back to its original height.
74+
For longer code content, it can be helpful to set a `maxHeight` for the Code Block to limit how much code is shown by default within the UI layout. If the content exceeds this height, a Show more code button will be displayed at the bottom of the Code Block, allowing users to expand it. Activating this button again will collapse the content back to its original height.
7575

7676
In Figma, this is enabled by setting `hasToggleHeightButton` to true. The button is placed inside a footer element that only appears when the content overflows, keeping the layout clean when the toggle isn’t needed.
7777

7878
![Collapsed Code Block showing limited lines and a 'Show more code' button at the bottom.](/assets/components/code-block/code-block-collapsed.png)
7979

80-
Interacting with this button removes the height limit, expanding the Code Block to display the full code snippet.
80+
Interacting with this button removes the height limit, expanding the Code Block to display the full code snippet.
8181

8282
![Expanded Code Block with all lines visible and a 'Show less code' button displayed at the bottom](/assets/components/code-block/code-block-expanded.png)
8383

0 commit comments

Comments
 (0)