diff --git a/gallery/src/components/NxAccordion/NxAccordionPage.tsx b/gallery/src/components/NxAccordion/NxAccordionPage.tsx
index 65bf392453..5d0c761df7 100644
--- a/gallery/src/components/NxAccordion/NxAccordionPage.tsx
+++ b/gallery/src/components/NxAccordion/NxAccordionPage.tsx
@@ -5,7 +5,17 @@
* distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
*/
import React from 'react';
-import { NxTable, NxInfoAlert, NxCode, NxTextLink, NxP, NxH3, NxTile } from '@sonatype/react-shared-components';
+import {
+ NxTable,
+ NxInfoAlert,
+ NxCode,
+ NxTextLink,
+ NxP,
+ NxH3,
+ NxTile,
+ NxH2,
+ NxList
+} from '@sonatype/react-shared-components';
import { GalleryDescriptionTile, GalleryExampleTile } from '../../gallery-components/GalleryTiles';
@@ -32,6 +42,39 @@ const NxAccordionPage = () =>
Note that this component is stateless – its open state must be tracked externally.
See NxStatefulAccordion for a version which tracks its own open state.
+
+
+ Guidelines
+
+ When to Use
+
+ Displaying and grouping additional information.
+ Adding granular control over the information on a given page.
+ Shortening pages to reduce scrolling.
+
+ When Not to Use
+
+
+ Displaying critical system information or a primary action to be taken on the page. (for example,
+ {' '}alerts, confirmation or cancellation buttons).
+
+
+ Displaying navigation elements such as tabs.
+
+
+ Displaying links pointing to sections of the same page, instead use a
+ {' '}list.
+
+
+ Creating hierarchy levels by nesting them within each other. If you need to add hierarchy to the
+ content use a tree.
+
+
+ Displaying a set of visual components following the same style, prefer using Collapsable.(TODO: Add
+ link to collapsable).
+
+
+
NxAccordion