{ "generatedAt": "2026-04-10T07:14:04.624Z", "components": [ { "name": "gds-alert", "tagName": "gds-alert", "className": "GdsAlert", "description": "", "path": "alert/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-backdrop", "tagName": "gds-backdrop", "className": "GdsBackdrop", "description": "", "path": "backdrop/", "files": [ "api", "angular", "react" ] }, { "name": "gds-badge", "tagName": "gds-badge", "className": "GdsBadge", "description": "`gds-badge`", "path": "badge/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-blur", "tagName": "gds-blur", "className": "GdsBlur", "description": "", "path": "blur/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-breadcrumb", "tagName": "gds-breadcrumb", "className": "GdsBreadcrumb", "description": "", "path": "breadcrumb/", "files": [ "api", "angular", "react" ] }, { "name": "gds-breadcrumbs", "tagName": "gds-breadcrumbs", "className": "GdsBreadcrumbs", "description": "", "path": "breadcrumbs/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-button", "tagName": "gds-button", "className": "GdsButton", "description": "", "path": "button/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-calendar", "tagName": "gds-calendar", "className": "GdsCalendar", "description": "", "path": "calendar/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-card", "tagName": "gds-card", "className": "GdsCard", "description": "A container for content representing a single entity. e.g. a contact, article, or task.\n\n`gds-card` inherits all properties from `gds-div`, but comes with some predefined defaults\nand a shortcut property for specifying different card variants.", "path": "card/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-card-linked", "tagName": "gds-card-linked", "className": "GdsCardLinked", "description": "", "path": "card-linked/", "files": [ "api", "angular", "react" ] }, { "name": "gds-card-pattern-01", "tagName": "gds-card-pattern-01", "className": "GdsCardPattern01", "description": "", "path": "card-pattern-01/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-checkbox", "tagName": "gds-checkbox", "className": "GdsCheckbox", "description": "", "path": "checkbox/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-checkbox-group", "tagName": "gds-checkbox-group", "className": "GdsCheckboxGroup", "description": "", "path": "checkbox-group/", "files": [ "api", "angular", "react" ] }, { "name": "gds-coachmark", "tagName": "gds-coachmark", "className": "GdsCoachmark", "description": "", "path": "coachmark/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-context-menu", "tagName": "gds-context-menu", "className": "GdsContextMenu", "description": "", "path": "context-menu/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-datepicker", "tagName": "gds-datepicker", "className": "GdsDatepicker", "description": "", "path": "datepicker/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-details", "tagName": "gds-details", "className": "GdsDetails", "description": "Details component that provides collapsible content sections.", "path": "details/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-dialog", "tagName": "gds-dialog", "className": "GdsDialog", "description": "", "path": "dialog/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-div", "tagName": "gds-div", "className": "GdsDiv", "description": "", "path": "div/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-divider", "tagName": "gds-divider", "className": "GdsDivider", "description": "", "path": "divider/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-dropdown", "tagName": "gds-dropdown", "className": "GdsDropdown", "description": "", "path": "dropdown/", "files": [ "api", "guidelines", "angular", "react" ], "subcomponents": [ { "tagName": "gds-option", "description": "Defines an option in the dropdown" }, { "tagName": "gds-menu-heading", "description": "Defines a non-selectable heading in the dropdown options list" } ] }, { "name": "gds-fab", "tagName": "gds-fab", "className": "GdsFab", "description": "", "path": "fab/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-filter-chip", "tagName": "gds-filter-chip", "className": "GdsFilterChip", "description": "", "path": "filter-chip/", "files": [ "api", "angular", "react" ] }, { "name": "gds-filter-chips", "tagName": "gds-filter-chips", "className": "GdsFilterChips", "description": "", "path": "filter-chips/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-flex", "tagName": "gds-flex", "className": "GdsFlex", "description": "", "path": "flex/", "files": [ "api", "guidelines", "instructions", "angular", "react" ] }, { "name": "gds-form-summary", "tagName": "gds-form-summary", "className": "GdsFormSummary", "description": "", "path": "form-summary/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-formatted-account", "tagName": "gds-formatted-account", "className": "GdsFormattedAccount", "description": "", "path": "formatted-account/", "files": [ "api", "angular", "react" ] }, { "name": "gds-formatted-date", "tagName": "gds-formatted-date", "className": "GdsFormattedDate", "description": "", "path": "formatted-date/", "files": [ "api", "angular", "react" ] }, { "name": "gds-formatted-number", "tagName": "gds-formatted-number", "className": "GdsFormattedNumber", "description": "", "path": "formatted-number/", "files": [ "api", "angular", "react" ] }, { "name": "gds-grid", "tagName": "gds-grid", "className": "GdsGrid", "description": "The `gds-grid` is a custom element that provides a flexible grid system. It uses CSS grid layout to arrange its child elements into columns. This component is highly customizable and responsive, allowing you to specify the number of `columns`, `gap`, `padding`, and fluidity for different devices with automated column size based on the content using the `auto-columns` attribute.", "path": "grid/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-grouped-list", "tagName": "gds-grouped-list", "className": "GdsGroupedList", "description": "", "path": "grouped-list/", "files": [ "api", "angular", "react" ] }, { "name": "gds-icon-details", "tagName": "gds-icon-details", "className": "GdsIconDetails", "description": "", "path": "icon-details/", "files": [ "api", "angular", "react" ] }, { "name": "gds-img", "tagName": "gds-img", "className": "GdsImg", "description": "", "path": "img/", "files": [ "api", "angular", "react" ] }, { "name": "gds-input", "tagName": "gds-input", "className": "GdsInput", "description": "", "path": "input/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-link", "tagName": "gds-link", "className": "GdsLink", "description": "", "path": "link/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-list-item", "tagName": "gds-list-item", "className": "GdsListItem", "description": "", "path": "list-item/", "files": [ "api", "angular", "react" ] }, { "name": "gds-mask", "tagName": "gds-mask", "className": "GdsMask", "description": "", "path": "mask/", "files": [ "api", "angular", "react" ] }, { "name": "gds-menu-button", "tagName": "gds-menu-button", "className": "GdsMenuButton", "description": "", "path": "menu-button/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-menu-heading", "tagName": "gds-menu-heading", "className": "GdsMenuHeading", "description": "", "path": "menu-heading/", "files": [ "api", "angular", "react" ] }, { "name": "gds-menu-item", "tagName": "gds-menu-item", "className": "GdsMenuItem", "description": "", "path": "menu-item/", "files": [ "api", "angular", "react" ] }, { "name": "gds-option", "tagName": "gds-option", "className": "GdsOption", "description": "", "path": "option/", "files": [ "api", "angular", "react" ] }, { "name": "gds-pagination", "tagName": "gds-pagination", "className": "GdsPagination", "description": "", "path": "pagination/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-popover", "tagName": "gds-popover", "className": "GdsPopover", "description": "", "path": "popover/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-radio", "tagName": "gds-radio", "className": "GdsRadio", "description": "", "path": "radio/", "files": [ "api", "guidelines", "instructions", "angular", "react" ] }, { "name": "gds-radio-group", "tagName": "gds-radio-group", "className": "GdsRadioGroup", "description": "", "path": "radio-group/", "files": [ "api", "angular", "react" ] }, { "name": "gds-rich-text", "tagName": "gds-rich-text", "className": "GdsRichText", "description": "`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.\n\nThe wrapped content will render inside the shadowRoot of the `gds-rich-text` element, thereby applying the\ndefault typography styles and standard element styles defined in the Green Design System.", "path": "rich-text/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-segment", "tagName": "gds-segment", "className": "GdsSegment", "description": "", "path": "segment/", "files": [ "api", "angular", "react" ] }, { "name": "gds-segmented-control", "tagName": "gds-segmented-control", "className": "GdsSegmentedControl", "description": "", "path": "segmented-control/", "files": [ "api", "guidelines", "angular", "react" ], "subcomponents": [ { "tagName": "gds-segment", "description": "Defines a segment in the segmented control" } ] }, { "name": "gds-select", "tagName": "gds-select", "className": "GdsSelect", "description": "", "path": "select/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-sensitive-account", "tagName": "gds-sensitive-account", "className": "GdsSensitiveAccount", "description": "", "path": "sensitive-account/", "files": [ "api", "angular", "react" ] }, { "name": "gds-sensitive-date", "tagName": "gds-sensitive-date", "className": "GdsSensitiveDate", "description": "", "path": "sensitive-date/", "files": [ "api", "angular", "react" ] }, { "name": "gds-sensitive-number", "tagName": "gds-sensitive-number", "className": "GdsSensitiveNumber", "description": "", "path": "sensitive-number/", "files": [ "api", "angular", "react" ] }, { "name": "gds-signal", "tagName": "gds-signal", "className": "GdsSignal", "description": "", "path": "signal/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-spinner", "tagName": "gds-spinner", "className": "GdsSpinner", "description": "", "path": "spinner/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-table", "tagName": "gds-table", "className": "GdsTable", "description": "", "path": "table/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-text", "tagName": "gds-text", "className": "GdsText", "description": "", "path": "text/", "files": [ "api", "guidelines", "instructions", "angular", "react" ] }, { "name": "gds-textarea", "tagName": "gds-textarea", "className": "GdsTextarea", "description": "", "path": "textarea/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-theme", "tagName": "gds-theme", "className": "GdsTheme", "description": "", "path": "theme/", "files": [ "api", "guidelines", "angular", "react" ] }, { "name": "gds-video", "tagName": "gds-video", "className": "GdsVideo", "description": "`gds-video` is a custom video element that provides configurable .mp4 video playback that can be used as background or hero video without controls.\nThe video can be customized with different properties like ratio, position, inset, width, height, opacity, fit, and radius.", "path": "video/", "files": [ "api", "guidelines", "angular", "react" ] } ] }