{  "sections": [          {      "id": "1-false",      "name": "Design",      "url": "/design_principles",      "anchor": "",      "excerpt": "Learn how we use visual elements like type, color, and icons for clarity and intention.",      "subpages": 4,      "data": "Design Learn how we use visual elements like type, color, and icons for clarity and intention."    },          {        "name": "Typography",        "url": "/design_principles",        "anchor": "#typography",        "excerpt": "",        "subpages": 0,        "data": "Typography  Typography is used to create clarity, readability and clear hierarchies to create great experiences for people using the product. Radius uses a single, flexible font, Aktiv Grotesk.Typeface:type_font_faceTypographic scale:h1, .h1 bold, 30px/38pxheading--level-1h2, .h2 bold, 24px/31pxheading--level-2h3, .h3 bold, 21px/27pxheading--level-3h4, .h4 bold, 19px/25pxheading--level-4h5, .h5 bold, 17px/22pxheading--level-5h6, .h6 bold, 15px/20pxheading--level-6Body text:body, .body 15px/22pxtype_bodyHelper text:helper text 13px/22pxhelper-textLinks:a #1498BEtype_linksLists:ul, li 15px/22pxlistsBest practicesAccessibilityHeading tags communicate the structure of the page to screen readers and other assistive technologies. Nest heading tags in order. For example, <h4> should not follow <h2>.Wide blocks of text are difficult to read and make it harder for people to focus. Limit line lengths to 70 characters or around 16 words."      },                {        "name": "Colors",        "url": "/design_principles",        "anchor": "#colors",        "excerpt": "",        "subpages": 0,        "data": "Colors  The colors in the control panel design are an extension of the NationBuilder brand.Primary colorscolors--primarycolors--bluecolors--primary-lightcolors--primary-lighterSecondary colorscolors--lightbluecolors--blue-filtercolors--secondarycolors--marooncolors--redcolors--greencolors--purplecolors--yellowcolors--deepyellowcolors--goldGrayscolors--whitecolors--gray-lightcolors--gray-100colors--gray-200colors--gray-300colors--gray-400colors--gray-500colors--gray-600colors--gray-700colors--gray-800colors--gray-900colors--blackBackground colorscolors--app-bg-colorcolors--nav-blueTheme colorsTheme colors are extensions of the design system that give meaning to components such as badges or alerts.colors--primarycolors--secondarycolors--tertiarycolors--warningcolors--graycolors--bright"      },                {        "name": "Icons",        "url": "/design_principles",        "anchor": "#icons",        "excerpt": "",        "subpages": 0,        "data": "Icons  Icons are visual representations of sections, commands, files, devices, or common actions.[System name] uses icons in moderation. Wherever possible, use text instead of icons. When using icons, be sure their meaning is unambiguous, and makes sense in the context of internationalization. Usage should be to increase clarity, so do not use them for merely decorative purposes.To use icons in conjunction with buttons, see Buttons.Primary navigation:The primary navigation uses icons to represent the six top-line sections of the Control Panel and the user’s settings.icons_navigationCommonly used icons:iconBest practices:AccessibilityWhen using standalone icons, use a method which allows for fallback text for screen readers.When using icons with text. be sure the text is descriptive of the icon, and include aria-hidden="true" on the icon itself."      },                {        "name": "Internationalization",        "url": "/design_principles",        "anchor": "#internationalization",        "excerpt": "",        "subpages": 0,        "data": "Internationalization  Tips when designing for text:Leave enough space to account for longer translations or prepare the design for scenarios when text or page elements are going to wrap to the next line.Don’t create sentences with UI elements because sentence structure and word order can be different in other languages.Don’t embed text in images because it isn’t accessible to translation or screen reader software.Watch out for cultural metaphors when working with icons or the naming of features."      },                    {      "id": "2-false",      "name": "Forms",      "url": "/form_elements",      "anchor": "",      "excerpt": "Explore each possible part of a form, and how and where they should be used.",      "subpages": 4,      "data": "Forms Explore each possible part of a form, and how and where they should be used."    },          {        "name": "Buttons",        "url": "/form_elements",        "anchor": "#buttons",        "excerpt": "",        "subpages": 6,        "data": "Buttons  Buttons are used to initialize an action, such as “Create page,” “Save content,” or “Delete comment.” Buttons should not be used as navigational items unless they link to the next step in a flow."      },              {          "name": "Positive buttons",          "url": "/form_elements",          "anchor": "#positive_buttons",          "excerpt": "",          "data": "Positive buttons  Used to call attention to the primary or most important action on a page. Typically, they should only be used once per view (not including a modal dialog).buttons--positive "        },              {          "name": "Neutral buttons",          "url": "/form_elements",          "anchor": "#neutral_buttons",          "excerpt": "",          "data": "Neutral buttons  The standard button used for most actions on a page.buttons--neutral "        },              {          "name": "Negative buttons",          "url": "/form_elements",          "anchor": "#negative_buttons",          "excerpt": "",          "data": "Negative buttons  Used when the primary action is destructive (delete, remove, etc.), and most often used in confirmation modals.buttons--negative "        },              {          "name": "Mini buttons",          "url": "/form_elements",          "anchor": "#mini_buttons",          "excerpt": "",          "data": "Mini buttons  buttons--mini "        },              {          "name": "Icon buttons",          "url": "/form_elements",          "anchor": "#icon_buttons",          "excerpt": "",          "data": "Icon buttons  Icons can be used with any button in order to signal specific actions or external links. Buttons can contain an icon alongside text or without it. Icons in buttons should be used sparingly and only when it increases comprehension.buttons--icon "        },              {          "name": "Button groups",          "url": "/form_elements",          "anchor": "#button_groups",          "excerpt": "",          "data": "Button groups  Buttons may be grouped together when their actions are related.buttons--group Best practicesLabelsButton labels should be sentence case and as short as possible, while clearly explaining what will occur when the button is clicked. They should begin with a verb that describes the action and reference its object, such as “Save content” or “Delete comment.”AccessibilityButtons should always have an accessible name.For buttons that don’t include text, e.g., icon buttons, an accessible name can be provided through an aria-label or aria-labelledby attribute.Whenever possible, use native HTML button controls, <button> or <input type="button">.When not using a native button control, the button role must be used instead to make role="button" to make it appear as one to a screen reader."        },                {        "name": "Inputs",        "url": "/form_elements",        "anchor": "#inputs",        "excerpt": "",        "subpages": 10,        "data": "Inputs  "      },              {          "name": "Text inputs",          "url": "/form_elements",          "anchor": "#text_inputs",          "excerpt": "",          "data": "Text inputs  Text input fields are used for inputting text are the most common input in the control panel.inputs "        },              {          "name": "Search inputs",          "url": "/form_elements",          "anchor": "#search_inputs",          "excerpt": "",          "data": "Search inputs  The search input is used for all search functionality on the control panel. Once a search term is entered, pressing Enter or Return on the keyboard will return search results. Optionally the search input may include autocomplete.inputs--search "        },              {          "name": "Date inputs",          "url": "/form_elements",          "anchor": "#date_inputs",          "excerpt": "",          "data": "Date inputs  The date input is used for selecting a specific date. When this field is active, a calendar selection will display below the field allowing a date to be selected which autofills the input with the selected date. Once a date is selected from the calendar, the calendar disappears.date_input "        },              {          "name": "Number inputs",          "url": "/form_elements",          "anchor": "#number_inputs",          "excerpt": "",          "data": "Number inputs  The number input is used when numbers need to be selected. Pressing the arrow buttons within on the left or right of the input will increase the number in the field by 1.inputs--number "        },              {          "name": "Checkbox inputs",          "url": "/form_elements",          "anchor": "#checkbox_inputs",          "excerpt": "",          "data": "Checkbox inputs  Checkbox inputs are used when any number of choices or a single option can be turned on or off.inputs--checkbox "        },              {          "name": "Radio inputs",          "url": "/form_elements",          "anchor": "#radio_inputs",          "excerpt": "",          "data": "Radio inputs  Radio buttons are used when a choice is offered between a list of two or more mutually exclusive options. Use a radio over select when you want to expose all available options. If there are more than 4 options, a select is preferable to avoid clutter.inputs--radio "        },              {          "name": "Textarea inputs",          "url": "/form_elements",          "anchor": "#textarea_inputs",          "excerpt": "",          "data": "Textarea inputs  Textarea is used for the entry of more than one line of text.textareas "        },              {          "name": "Toggle inputs",          "url": "/form_elements",          "anchor": "#toggle_inputs",          "excerpt": "",          "data": "Toggle inputs  Used to allow for a switch between two mutually exclusive states, such as turning a feature on or off. These should be used for actions that occur immediately after the toggle switch is “flipped.” Autosave is generally expected with a toggle, so use a checkbox if autosave isn’t available.inputs--toggle "        },              {          "name": "Help text",          "url": "/form_elements",          "anchor": "#help_text",          "excerpt": "",          "data": "Help text  Additional instructions or context that may appear beside or below the input field.helper-text "        },              {          "name": "Datetime inputs",          "url": "/form_elements",          "anchor": "#datetime_inputs",          "excerpt": "",          "data": "Datetime inputs  The datetime inputs are used for scheduling content to be published at a given date and time. inputs--datetimepicker "        },                {        "name": "Selects",        "url": "/form_elements",        "anchor": "#selects",        "excerpt": "",        "subpages": 3,        "data": "Selects  Select inputs are most often used when a person must choose one option from a list (the exception is the multiple select). Consider using a select when you have more than 4 options to avoid clutter. Use Select as a placeholder unless there’s a default option."      },              {          "name": "Default selects",          "url": "/form_elements",          "anchor": "#default_selects",          "excerpt": "",          "data": "Default selects  select_input "        },              {          "name": "Dynamic selects",          "url": "/form_elements",          "anchor": "#dynamic_selects",          "excerpt": "",          "data": "Dynamic selects  Used when more complex information needs to be displayed in each option. Most typically used to display lists of people or organizations.select_input_dynamic "        },              {          "name": "Multiple selects",          "url": "/form_elements",          "anchor": "#multiple_selects",          "excerpt": "",          "data": "Multiple selects  Used to select multiple options from a list, such as locations or tags.select_input_multiple "        },                {        "name": "File uploader",        "url": "/form_elements",        "anchor": "#file_uploader",        "excerpt": "",        "subpages": 0,        "data": "File uploader  The file uploader creates a region to drag and drop files to upload.form--uploadUpload queueThe upload queue displays a listing of files currently being uploaded and their progress. Each item contains the file name, a progress bar with percentage, and an “x” icon to cancel it. Once a file has completed the upload process it is removed from the queue and added to the files listing.upload-queueBest practicesAccessibilityThe progressbar role should be used along with the aria-valuenow, aria-valuemin, and aria-valuemax attributes. The aria-valuenow value should be updated dynamically to indicate progress to assistive devices."      },                    {      "id": "3-false",      "name": "Navigation",      "url": "/navigation",      "anchor": "",      "excerpt": "Learn how we use navigation to establish clear hierarchy and orientation.",      "subpages": 6,      "data": "Navigation Learn how we use navigation to establish clear hierarchy and orientation."    },          {        "name": "Primary navigation",        "url": "/navigation",        "anchor": "#primary_navigation",        "excerpt": "",        "subpages": 0,        "data": "Primary navigation  Primary navigation is used to navigate between the core sections of NationBuilder. It is a left aligned, vertical navigation that can be collapsed or expanded. It is expanded by default, but can be collapsed to allow for more screen real estate. When collapsed, the primary navigation will expand upon hover.State: ExpandedDefault stateCollapsedInitiated when a user clicks the collapse icon and it will automatically expand on hover primary_nav"      },                {        "name": "Sub navigation",        "url": "/navigation",        "anchor": "#sub_navigation",        "excerpt": "",        "subpages": 4,        "data": "Sub navigation  Sub navigation is used to move among related sections within the same context. There are 4 levels of sub navigation with a distinct visual style that gradually nest deeper within related sections as needed."      },              {          "name": "Subnav: Level 1",          "url": "/navigation",          "anchor": "#subnav_level_1",          "excerpt": "",          "data": "Subnav: Level 1  Located at the bottom of the page header, used to navigate within a top level section of the control panel.subnav--level-1 "        },              {          "name": "Subnav: Level 2",          "url": "/navigation",          "anchor": "#subnav_level_2",          "excerpt": "",          "data": "Subnav: Level 2  Located at the top of a content body background, used to navigate within subnav level 1.subnav_2 "        },              {          "name": "Subnav: Level 3",          "url": "/navigation",          "anchor": "#subnav_level_3",          "excerpt": "",          "data": "Subnav: Level 3  Often located directly beneath subnav level 2, used to navigate within subnav level 2.subnav_3 "        },              {          "name": "Subnav: Level 4",          "url": "/navigation",          "anchor": "#subnav_level_4",          "excerpt": "",          "data": "Subnav: Level 4  Often located within the content of subnav level 3, used to navigate around a specific component.subnav_4 Best practicesAccessibilityCode your navigation using link tags.Put your links within an unordered list structure so that a screen reader will read out how many things are in the list to give visually impaired people the most information possible about the contents of the navigation.Use the semantic <nav> tag around your unordered list and links with an ARIA role='navigation' attribute.Optionally, attach an aria-label attribute to your navigation to give users of assistive technology as much information as possible (especially if there are multiple navigations on your site)."        },                {        "name": "Toolbars",        "url": "/navigation",        "anchor": "#toolbars",        "excerpt": "",        "subpages": 2,        "data": "Toolbars  The toolbar is a powerful multipurpose interface used to help filter, sort, organize, and take action on segments of your people or financial database."      },              {          "name": "People toolbar",          "url": "/navigation",          "anchor": "#people_toolbar",          "excerpt": "",          "data": "People toolbar  toolbar--people "        },              {          "name": "Finance toolbar",          "url": "/navigation",          "anchor": "#finance_toolbar",          "excerpt": "",          "data": "Finance toolbar  toolbar--finances "        },                {        "name": "User menu",        "url": "/navigation",        "anchor": "#user_menu",        "excerpt": "",        "subpages": 0,        "data": "User menu  The user menu displays the photo of who is currently signed in to the control panel, and is always accessible in the top right corner of the page. It provides quick links such as the ability to edit the account, add a control panel user, access support or sign out.user_menu"      },                {        "name": "Breadcrumbs",        "url": "/navigation",        "anchor": "#breadcrumbs",        "excerpt": "",        "subpages": 0,        "data": "Breadcrumbs  Breadcrumbs indicate the current page’s location within a navigational hierarchy.breadcrumbsBest practicesAccessibilitySince breadcrumbs provide navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the nav element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page."      },                {        "name": "Pagination",        "url": "/navigation",        "anchor": "#pagination",        "excerpt": "",        "subpages": 0,        "data": "Pagination  Pagination should be used for lists of 30 items or more. It should allow for navigation between the previous and next set of items in a paged list. Pagination should always be included at both the top and bottom of the list, and indicate when a person is at the beginning or end of the list.pagination"      },                    {      "id": "4-false",      "name": "Components",      "url": "/components",      "anchor": "",      "excerpt": "Browse how everything from tables to discrete components are used to convey information.",      "subpages": 13,      "data": "Components Browse how everything from tables to discrete components are used to convey information."    },          {        "name": "Alerts",        "url": "/components",        "anchor": "#alerts",        "excerpt": "",        "subpages": 2,        "data": "Alerts  Alerts are used to inform the user of application-wide issues, warnings, or errors. They are also used to provide direct feedback for whether an action was completed successfully or resulted in error."      },              {          "name": "Inline Alerts",          "url": "/components",          "anchor": "#inline_alerts",          "excerpt": "",          "data": "Inline Alerts  Used for global or persistent alerts related to application-wide issues, warnings, or errors. These alerts may not be dismissible by the user in cases where an action is required, and are always displayed within the main white content container. alert--toast-actionsalert--infoalert--warningalert--dangeralert--success"        },              {          "name": "Toast Alerts",          "url": "/components",          "anchor": "#toast_alerts",          "excerpt": "",          "data": "Toast Alerts  Used for providing direct feedback on user actions. These alerts may be dismissible via click and/or should also disappear after a set amount of time.alert--toastalert--toast-warningalert--toast-dangeralert--toast-success Status InfoUsed to provide the user with more information or additional contextWarningUsed to inform the user when they are about to do something that is destructive or when the result of an action is unexpected, but isn't an errorDangerUsed to inform the user that something went wrong. The message should explain the problem and try to provide a next step or an alternative if the user needs to take some action in responseSuccessUsed to tell the user when an interaction or task has been completed successfully Best practicesAccessibilityUse the proper ARIA role:"alert" if the user's immediate attention is required"alertdialog” if the alert provides actions for the user to perform"        },                {        "name": "Avatars",        "url": "/components",        "anchor": "#avatars",        "excerpt": "",        "subpages": 0,        "data": "Avatars  The avatar component is a circular user photo used in multiple locations throughout the control panel. The avatar component comes in 5 sizes.avatar--mediumSizeClass Default.avatarwidth: 30px, height: 30pxExtra small.avatar--xswidth: 14px, height: 14pxSmall.avatar--smwidth: 24px, height: 24pxMedium.avatar--mdwidth: 50px, height: 50pxLarge.avatar--lgwidth: 70px, height: 70px"      },                {        "name": "Badges",        "url": "/components",        "anchor": "#badges",        "excerpt": "",        "subpages": 0,        "data": "Badges  Badges are used to show status. There are a few different types of badges that can be used.badgeVariantUsagePrimaryUsed to show neutral statusSecondaryUsed to show neutral statusSuccessUsed to show positive statusDangerUsed to show negative statusInfoUsed to show informative statusWarningUsed to show warning statusRankUsed to show ranking status"      },                {        "name": "Cards",        "url": "/components",        "anchor": "#cards",        "excerpt": "",        "subpages": 0,        "data": "Cards  Cards are used to contain information and provide a clear grouping of related information.card--person Best practicesWhen to display people in cards vs. a tableIn general, lists of people should be placed on cards if there is no subnav 2 directly above the listing.AccessibilityContent or UI elements should never be placed on the grey background of the control panel but should always be placed within a card."      },                {        "name": "Comments",        "url": "/components",        "anchor": "#comments",        "excerpt": "",        "subpages": 0,        "data": "Comments  Comments are a component of the activity stream and support HTML.comment"      },                {        "name": "Dropdowns",        "url": "/components",        "anchor": "#dropdowns",        "excerpt": "",        "subpages": 6,        "data": "Dropdowns  Dropdowns are overlays which display a list of links while using a small amount of screen real estate. There are several different contexts in which dropdowns are used in NationBuilder."      },              {          "name": "Default dropdown",          "url": "/components",          "anchor": "#default_dropdown",          "excerpt": "",          "data": "Default dropdown  dropdown_default "        },              {          "name": "Split dropdown",          "url": "/components",          "anchor": "#split_dropdown",          "excerpt": "",          "data": "Split dropdown  Split dropdowns allow for two interactions on a related function. The left side of the split functions as a button, such as opening a filter, and the chevron on the right is a dropdown displaying a list of related links, such as a list of saved filters.dropdown_split "        },              {          "name": "Icon only dropdown",          "url": "/components",          "anchor": "#icon_only_dropdown",          "excerpt": "",          "data": "Icon only dropdown  The icon only dropdown functions identically to the Default dropdown, except that it displays an icon instead of text.dropdown_icon_only "        },              {          "name": "List dropdown",          "url": "/components",          "anchor": "#list_dropdown",          "excerpt": "",          "data": "List dropdown  The list dropdown is a powerful specialized interface which allows users to search, select or edit lists as well as create new ones. List names also display a count of how many people exist within that list. It is primarily used within the navigation of the People section.dropdown_list "        },              {          "name": "Path dropdown",          "url": "/components",          "anchor": "#path_dropdown",          "excerpt": "",          "data": "Path dropdown  The path dropdown is a powerful specialized interface which allows users to search, select and edit Paths, filter by Abandoned, Active, or Completed as well as create a new path. It is primarily used within the navigation of the People section.dropdown_path "        },              {          "name": "Action menu dropdown",          "url": "/components",          "anchor": "#action_menu_dropdown",          "excerpt": "",          "data": "Action menu dropdown  True to the name, action menu dropdowns are used to take action on a specific item within a list of items. They are always used with lists of people or on a row within a table, and are accompanied by a batch action dropdown at the top of the list.dropdown--chevronWhen to use the action menuIn general the action menu should not be used to just tuck away any link. It should be limited to internal actions (add/remove from list, delete, add/remove as a follower),or the type of actions that can be done in batch when views allow for an action menu at the top of a list (add everyone to a list, etc). Best practicesAccessibilityIndicate menu items with submenus visually and using markup. In the following example, the submenu is indicated visually by an icon and this WAI-ARIA markup:aria-haspopup="true" declares that a menu item has a submenu.aria-expanded="false" declares that the submenu is hidden."        },                {        "name": "Popovers",        "url": "/components",        "anchor": "#popovers",        "excerpt": "",        "subpages": 0,        "data": "Popovers  Popovers are floating information panels that describe an item being hovered over. Popovers can contain more information than a tooltip. They can include a heading, paragraph text, or in some cases, an image.popover"      },                {        "name": "Stat boxes",        "url": "/components",        "anchor": "#stat_boxes",        "excerpt": "",        "subpages": 0,        "data": "Stat boxes  Stat boxes are at-a-glance indicators of statuses found in people's profiles, in the activities dashboard, when viewing membership types, or on some page types. Stat boxes have two components, the stat and the label. Stats can be numerical or boolean.stat-boxesBest PracticesAccessibilityBooleans should use the .on-button or .off-button, never words such as “Yes,” “No,” “Is,” or “Is not.”"      },                {        "name": "Tooltip",        "url": "/components",        "anchor": "#tooltip",        "excerpt": "",        "subpages": 0,        "data": "Tooltip  Tooltips are floating information panels that describe an item being hovered over. Tooltips should contain no more than a sentence of text with no images or links. For longer information, use a popover.tooltip--top"      },                {        "name": "Modals",        "url": "/components",        "anchor": "#modals",        "excerpt": "",        "subpages": 4,        "data": "Modals  A modal appears in an overlay on top of the main content in order to focus content and draw attention. Modals can be used to request more information in order to complete the current interaction or to break up an interaction into simpler steps. Typically modals are used for confirmation dialogs."      },              {          "name": "Default modal",          "url": "/components",          "anchor": "#default_modal",          "excerpt": "",          "data": "Default modal  Used to display simple information. This may only be a heading and text, but it may also include a button.modal--default "        },              {          "name": "List modal",          "url": "/components",          "anchor": "#list_modal",          "excerpt": "",          "data": "List modal  Used for choosing a list in the people section. From this modal, users can create a new list or add people to a list.modal--list "        },              {          "name": "Form modal",          "url": "/components",          "anchor": "#form_modal",          "excerpt": "",          "data": "Form modal  Used when there is a modal that submits a form. One place this is used is for inviting people to be admins on the control panel.modal--add-control-panel-user "        },              {          "name": "Add Remove Modal",          "url": "/components",          "anchor": "#add_remove_modal",          "excerpt": "",          "data": "Add Remove Modal  Used simply for adding or removing people from a list.modal--add-remove Best practicesAccessibilityFocusWhen a dialog opens, focus should move to an element inside the dialogWhen the dialog closes, focus should return to the last focused elementWhile the dialog is open, prevent tabular focus outside of the dialogThe element that serves as the dialog container has a role of dialogThe dialog container element has aria-modal set to trueThe dialog should have a value set for the `aria-labelledby` property that refers to a visible dialog title or a label specified by `aria-label`Optionally the `aria-describedby` can be used to provide a description for the dialogUsers should be able to use the ESC key to close the dialog"        },                {        "name": "Tables",        "url": "/components",        "anchor": "#tables",        "excerpt": "",        "subpages": 3,        "data": "Tables  Tables are used to organize large amounts of related information into categories making them easy to scan."      },              {          "name": "Standard tables",          "url": "/components",          "anchor": "#standard_tables_component",          "excerpt": "",          "data": "Standard tables  This is a straight-forward Bootstrap 4 table with table cells set to vertically align center. You can override this by using Bootstrap’s alignment utility classes.table "        },              {          "name": "Sortable tables",          "url": "/components",          "anchor": "#sortable_tables",          "excerpt": "",          "data": "Sortable tables  The sortable table allows for reordering of table rows by drag and drop. This table should be used when the order of rows needs to be customizable and mirror the order in which the items exist elsewhere (e.g. navs, featured content sliders).table_sort "        },              {          "name": "Nested tables",          "url": "/components",          "anchor": "#nested_tables",          "excerpt": "",          "data": "Nested tables  Nested tables have two levels of hierarchy, nesting child rows under a parent row. This table enables a person to take action on all children on the parent row via the action menu, yet also includes an edit link on each child level. Nested tables should only be used when it’s important to display a parent/child relationship between rows, and when there are less than 5 rows of children per parent.table--nested "        },                {        "name": "Notes",        "url": "/components",        "anchor": "#notes",        "excerpt": "",        "subpages": 0,        "data": "Notes  Notes are used to inform users about a certain action or input.note"      },                {        "name": "Action",        "url": "/components",        "anchor": "#action",        "excerpt": "",        "subpages": 0,        "data": "Action  Actions are used with the workflows section to show an automations actions. Actions contain reactions and include links to information about an automations reactions.action--default"      },                    {      "id": "5-true",      "name": "Patterns",      "url": "/patterns",      "anchor": "",      "excerpt": "Discover how consistent patterns are used to organize data or support features.",      "subpages": 13,      "data": "Patterns Discover how consistent patterns are used to organize data or support features."    },          {        "name": "Activity stream",        "url": "/patterns",        "anchor": "#activity_stream",        "excerpt": "",        "subpages": 0,        "data": "Activity stream  The activity stream pattern is used to show easy to scan activity within a given context. This activity could be shown on the control panel dashboard, a person’s profile, or any place that aggregates activity. The elements included are an activity type icon, user avatar, activity content, expanded content, and activity date.stream"      },                {        "name": "App profile",        "url": "/patterns",        "anchor": "#app_profile",        "excerpt": "",        "subpages": 0,        "data": "App profile  The app listing view uses a standard table and displays the logo, name, owner, and description of each app. Users can click through to install.settings--apps-install-new-app"      },                {        "name": "Criteria filters",        "url": "/patterns",        "anchor": "#criteria_filters",        "excerpt": "",        "subpages": 0,        "data": "Criteria filters  Used for creating a listing of related criteria, such as for a filter. Each criteria grouping contains a row of related input fields.criteria-list"      },                {        "name": "Followups",        "url": "/patterns",        "anchor": "#followups",        "excerpt": "",        "subpages": 0,        "data": "Followups  Followup items are displayed as a list in the right hand column of the signup profile card with a "+ Followup” action at the top that allows users to add new followups to a profile through a modal dialog. Each followup item contains an icon which is colored based on its status, the followup type name, and a relative due date that is linked to a date picker to change it. Clicking the followup item removes it from the profile.followups"      },                {        "name": "Leaderboards",        "url": "/patterns",        "anchor": "#leaderboards",        "excerpt": "",        "subpages": 0,        "data": "Leaderboards  Leaderboards display a ranked listing of signups based on a specific activity goal. Leaderboards are typically displayed in the right-hand column with a title, date last updated, and a listing of signups which includes their avatar with a rank badge, linked name, and their contribution to the goal.leaderboard"      },                {        "name": "Page header",        "url": "/patterns",        "anchor": "#page_header",        "excerpt": "",        "subpages": 0,        "data": "Page header  The page header displays information about the view and also helps orient the user for where they are in the product. It can contain multiple elements, these include: the page heading, search bar, user avatar and menu, breadcrumbs, and sub-navigation level 1. There could also be information included about a broadcaster, website page, or signup profile information.header"      },                {        "name": "Paths",        "url": "/patterns",        "anchor": "#paths",        "excerpt": "",        "subpages": 2,        "data": "Paths  "      },              {          "name": "Path Journey",          "url": "/patterns",          "anchor": "#path_journey",          "excerpt": "",          "data": "Path Journey  A path journey component is made of 2 parts, the journey info and the path steps. The journey info displays the name of the path, the avatar of the point person if one is assigned, and an action chevron. The steps of the path are displayed in order with the active step highlighted.path-journey--sponsor A signup's currently active path journeys are displayed at the bottom of the signup card with and “Add path” action button."        },              {          "name": "Path view",          "url": "/patterns",          "anchor": "#path_view",          "excerpt": "",          "data": "Path view  Path view displays the steps of a path in columns from left to right with cards for each signup currently on each step. Step headers include the name of the step, number of journeys, and the total associated value.path-view "        },                {        "name": "Permission sets",        "url": "/patterns",        "anchor": "#permission_sets",        "excerpt": "",        "subpages": 0,        "data": "Permission sets  Permission sets define the access of control panel users to different parts of the app. They are displayed in a table containing outlined badges to demarcate features of the permission. The table only shows the top level access. e.g. If a permission set has access to any of the website features, they will have a “yes” badge under “Website.” Hovering on the permission set allows you to edit with more granularity.table--permission-setsThe edit view of an individual permission set is a form populated by checkboxes and an input field at the top to name the set. Each grouping of checkboxes has a bolded header. Checking this header will select all the checkboxes in the grouping. Only the “People” header also contains a dropdown with a qualification of which category of people this permission set allows access to.settings--defaults-permission-set-edit"      },                {        "name": "Goals",        "url": "/patterns",        "anchor": "#goals",        "excerpt": "",        "subpages": 0,        "data": "Goals  Goals are displayed with the name of the goal, the date range of when the goal starts and ends, a thermometer demonstrating progress towards the goal, the person responsible for that goal including their leaderboard rank, the person’s contribution towards the goal and the remaining number needed towards the goal. Goals are collected in a table."      },                {        "name": "Preview",        "url": "/patterns",        "anchor": "#preview",        "excerpt": "",        "subpages": 0,        "data": "Preview  "      },                {        "name": "Priority meter",        "url": "/patterns",        "anchor": "#priority_meter",        "excerpt": "",        "subpages": 0,        "data": "Priority meter  The priority meter is used to set priority on a signup’s profile using a score of 1 - 5. Clicking the small scored priority meter triggers the priority popover that allows selection of a new priority score. Once selected, the new score is shown and the priority popover closes.priority"      },                {        "name": "Theme selection",        "url": "/patterns",        "anchor": "#theme_selection",        "excerpt": "",        "subpages": 0,        "data": "Theme selection  The Theme Selector is used to select a website theme from a list of public themes. Hovering over a thumbnail will reveal a button to select the theme. Themes are shown in a flexible grid that fill out the card depending on the size of the browser.theme-selector-item"      },                {        "name": "Turf cutter",        "url": "/patterns",        "anchor": "#turf_cutter",        "excerpt": "",        "subpages": 0,        "data": "Turf cutter  The turf cutter is used to group lists of signups by location. It behaves like this:1. Clicking the turf cutter button on a map will turn on the turf cutter controls.2. While turf cutter is on, users can draw a bounding box on a map to identify anyone within that geographic location.turf-cutter"      },              ]}