collapsible sections on component docs pages?

[brian-smith-tcril]

Inspired by this comment

As we add more examples to component pages on the docs site, it's possible users will feel overwhelmed with the amount of information presented at once.

It'd be great to ensure we don't overwhelm users, without scaling back the number of examples we provide for components.

One possible way to address this would be to add collapsible sections to the docs pages, so examples could be shown/hidden.

I'm sure there are other solutions to consider as well (hence marking this issue as "discovery")

[adamstankiewicz]

Related, there has been some design discovery in the past to redesign the component pages on the documentation site: Figma.

For example, it splits out content into different tabs for "Design guidelines" vs. "Implementation" (but it could also have "Accessibility", etc.). That said, even then, the "Implementation" tab alone could be quite large given what we have today.

[brian-smith-tcril]

Design guidelines and Implementation tabs would definitely go a long way!

One thing to consider is what we want to have above the fold on the implementation tab.

If the tabs go where they are in Figma at the moment

above the fold would stay the same between guidelines and implementation.

Another idea would be to split off the implementation examples into separate files. Possibly use cards to show/link to all the different examples that exist.

I'm just kind of throwing ideas around, I'm excited to see what design comes up with!