Component reference
Find any of FG UI’s 457 Stable component families.
Search the 1.2 Stable reference by component name, class, category, hook or accessibility attribute, then filter by layer or release history.
Built with FG UI itself.
This page is built entirely with FG UI using the same components, layout primitives, icons and interactions available in the kit. No Bootstrap, Tailwind or external UI framework is required.
223 Basic234 Combined64 NEW 1.2393-family 1.1 baseline457 component families shown
| Component | Layer | Category | Runtime | Contract details |
|---|---|---|---|---|
Button .fgui-btnExisting | Basic | Basic · Actions & branding | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-btn--primaryA11y: none in canonical specimen |
Button group .fgui-btn-groupExisting | Basic | Basic · Actions & branding | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Icon button .fgui-icon-btnExisting | Basic | Basic · Actions & branding | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Icon .fgui-iconExisting | Basic | Basic · Actions & branding | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Brand mark .fgui-brand-markUPDATED 1.1 | Basic | Basic · Actions & branding | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Brand lockup .fgui-brand-lockupExisting | Basic | Basic · Actions & branding | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-brand-lockup__logoModifiers: none in canonical specimenA11y: aria-label |
Card .fgui-cardUPDATED 1.1 | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Avatar .fgui-avatarExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Avatar group .fgui-avatar-groupExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Media card .fgui-media-cardExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-media-card__body, .fgui-media-card__previewModifiers: none in canonical specimenA11y: none in canonical specimen |
File .fgui-fileExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-file__body, .fgui-file__iconModifiers: none in canonical specimenA11y: none in canonical specimen |
Status .fgui-statusUPDATED 1.1 | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-status--danger, .fgui-status--success, .fgui-status--warningA11y: none in canonical specimen |
Tag .fgui-tagExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Presence .fgui-presenceExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Counter .fgui-counterExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Rating .fgui-ratingExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Meter .fgui-meterExisting | Basic | Basic · Cards & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-meter__bar, .fgui-meter__bar--72, .fgui-meter__head, .fgui-meter__trackModifiers: none in canonical specimenA11y: none in canonical specimen |
Container .fgui-containerExisting | Basic | Basic · Layout primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Section .fgui-sectionUPDATED 1.1 | Basic | Basic · Layout primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Stack .fgui-stackExisting | Basic | Basic · Layout primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-stack--smA11y: none in canonical specimen |
Cluster .fgui-clusterExisting | Basic | Basic · Layout primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Responsive grid .fgui-gridExisting | Basic | Basic · Layout primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-grid--3A11y: none in canonical specimen |
Split layout .fgui-splitExisting | Basic | Basic · Layout primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Sidebar layout .fgui-sidebar-layoutExisting | Basic | Basic · Layout primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Field .fgui-fieldExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Input .fgui-inputExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Textarea .fgui-textareaExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Select .fgui-selectExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-placeholderChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Custom select .fgui-custom-selectExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-placeholderChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Search .fgui-searchUPDATED 1.1 | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-search__iconModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Input group .fgui-input-groupExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Input affix .fgui-input-affixExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Checkbox .fgui-checkExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Radio .fgui-radioExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Switch .fgui-switchExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-switch__trackModifiers: none in canonical specimenA11y: none in canonical specimen |
Range .fgui-rangeExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Dropzone .fgui-dropzoneExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-dropzoneChildren: .fgui-dropzone__iconModifiers: none in canonical specimenA11y: aria-hidden |
Password field .fgui-passwordExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-password-input, data-fgui-password-toggleChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Password strength .fgui-password-strengthExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
OTP input .fgui-otpExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Tag input .fgui-tag-inputExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-tag-input__chipModifiers: none in canonical specimenA11y: aria-label |
Mention picker .fgui-mention-pickerExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-mention-picker__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Inline edit .fgui-inline-editExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-inline-edit-valueChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Media picker .fgui-media-pickerExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-media-picker__actions, .fgui-media-picker__previewModifiers: none in canonical specimenA11y: none in canonical specimen |
Upload queue .fgui-upload-queueExisting | Basic | Basic · Forms & controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Date picker .fgui-date-pickerExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-date-clear, data-fgui-date-grid, data-fgui-date-input, data-fgui-date-label, data-fgui-date-month, data-fgui-date-next, data-fgui-date-picker, data-fgui-date-popover, data-fgui-date-prev, data-fgui-date-today, data-fgui-date-triggerChildren: .fgui-date-picker__grid, .fgui-date-picker__popover, .fgui-date-picker__weekdaysModifiers: none in canonical specimenA11y: aria-expanded, aria-hidden, aria-label, hidden |
Time picker .fgui-time-pickerExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-time-clear, data-fgui-time-done, data-fgui-time-hours, data-fgui-time-input, data-fgui-time-label, data-fgui-time-minutes, data-fgui-time-picker, data-fgui-time-popover, data-fgui-time-triggerChildren: .fgui-time-picker__column-label, .fgui-time-picker__columns, .fgui-time-picker__head, .fgui-time-picker__options, .fgui-time-picker__popoverModifiers: none in canonical specimenA11y: aria-expanded, aria-hidden, hidden |
Month picker .fgui-month-pickerExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-month-clear, data-fgui-month-current, data-fgui-month-grid, data-fgui-month-input, data-fgui-month-label, data-fgui-month-next, data-fgui-month-picker, data-fgui-month-popover, data-fgui-month-prev, data-fgui-month-trigger, data-fgui-month-yearChildren: .fgui-month-picker__grid, .fgui-month-picker__popoverModifiers: none in canonical specimenA11y: aria-expanded, aria-hidden, aria-label, hidden |
Colour picker .fgui-color-pickerExisting | Basic | Basic · Forms & controls | FG UI JavaScript enhanced | Hooks: data-fgui-color-apply, data-fgui-color-hex, data-fgui-color-input, data-fgui-color-label, data-fgui-color-picker, data-fgui-color-popover, data-fgui-color-swatch, data-fgui-color-trigger, data-fgui-color-valueChildren: .fgui-color-picker__custom, .fgui-color-picker__grid, .fgui-color-picker__option, .fgui-color-picker__option--blue, .fgui-color-picker__option--danger, .fgui-color-picker__option--purple, .fgui-color-picker__option--slate, .fgui-color-picker__option--success, .fgui-color-picker__option--warning, .fgui-color-picker__popover, .fgui-color-picker__swatchModifiers: none in canonical specimenA11y: aria-expanded, aria-hidden, aria-label, hidden |
Breadcrumbs .fgui-breadcrumbsExisting | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-breadcrumbs__sepModifiers: none in canonical specimenA11y: none in canonical specimen |
Tabs .fgui-tabsUPDATED 1.1 | Basic | Basic · Navigation & choice | FG UI JavaScript enhanced | Hooks: data-fgui-tab, data-fgui-tabsChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-selected, role |
Segmented control .fgui-segmentedExisting | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Side navigation .fgui-side-navExisting | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Toolbar .fgui-toolbarUPDATED 1.1 | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Pagination .fgui-paginationExisting | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Stepper .fgui-stepperExisting | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Chip .fgui-chipExisting | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-chip__countModifiers: none in canonical specimenA11y: none in canonical specimen |
Keyboard key .fgui-kbdExisting | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Navigation count link .fgui-nav-count-linkNEW 1.1 | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-nav-count-link__count, .fgui-nav-count-link__labelModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Count badge .fgui-count-badgeNEW 1.1 | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-count-badge--danger, .fgui-count-badge--neutralA11y: aria-label |
Navigation section .fgui-nav-sectionNEW 1.1 | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-nav-section__links, .fgui-nav-section__titleModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Authentication switch .fgui-auth-switchNEW 1.1 | Basic | Basic · Navigation & choice | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Alert .fgui-alertUPDATED 1.1 | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-alert__content, .fgui-alert__iconModifiers: .fgui-alert--infoA11y: none in canonical specimen |
Note .fgui-noteUPDATED 1.1 | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-note__contentModifiers: none in canonical specimenA11y: none in canonical specimen |
Spinner .fgui-spinnerExisting | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Progress .fgui-progressExisting | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-progress__value--60Modifiers: none in canonical specimenA11y: none in canonical specimen |
Loader .fgui-loaderExisting | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Skeleton .fgui-skeletonExisting | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-skeleton--line, .fgui-skeleton--titleA11y: none in canonical specimen |
Empty state .fgui-empty-stateExisting | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-empty-state__iconModifiers: none in canonical specimenA11y: none in canonical specimen |
Tooltip .fgui-tooltipExisting | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-tooltip__bubbleModifiers: none in canonical specimenA11y: none in canonical specimen |
Toast .fgui-toastExisting | Basic | Basic · Feedback & loading | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Menu .fgui-menuExisting | Basic | Basic · Disclosure & overlays | FG UI JavaScript enhanced | Hooks: data-fgui-menu-panel, data-fgui-menu-toggleChildren: .fgui-menu__dividerModifiers: none in canonical specimenA11y: role |
Accordion .fgui-accordionExisting | Basic | Basic · Disclosure & overlays | FG UI JavaScript enhanced | Hooks: data-fgui-accordion-indicator, data-fgui-accordion-triggerChildren: .fgui-accordion__item, .fgui-accordion__panel, .fgui-accordion__triggerModifiers: none in canonical specimenA11y: aria-hidden |
Modal .fgui-modalExisting | Basic | Basic · Disclosure & overlays | FG UI JavaScript enhanced | Hooks: data-fgui-modal-close, data-fgui-modal-openChildren: .fgui-modal__body, .fgui-modal__footer, .fgui-modal__headerModifiers: .fgui-modal--smallA11y: aria-hidden, aria-label, aria-labelledby, aria-modal, role |
Drawer .fgui-drawerExisting | Basic | Basic · Disclosure & overlays | FG UI JavaScript enhanced | Hooks: data-fgui-drawer-close, data-fgui-drawer-toggleChildren: .fgui-drawer__body, .fgui-drawer__headerModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Popover .fgui-popoverExisting | Basic | Basic · Disclosure & overlays | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-popover__titleModifiers: none in canonical specimenA11y: none in canonical specimen |
Lightbox .fgui-lightboxExisting | Basic | Basic · Disclosure & overlays | FG UI JavaScript enhanced | Hooks: data-fgui-lightbox-close, data-fgui-lightbox-media, data-fgui-lightbox-openChildren: .fgui-lightbox__backdrop, .fgui-lightbox__close, .fgui-lightbox__dialog, .fgui-lightbox__mediaModifiers: none in canonical specimenA11y: aria-hidden, aria-label, aria-modal, role |
Table .fgui-tableUPDATED 1.1 | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
List .fgui-listExisting | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-list__item, .fgui-list__main, .fgui-list__meta, .fgui-list__titleModifiers: none in canonical specimenA11y: none in canonical specimen |
Statistic .fgui-statExisting | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-stat__label, .fgui-stat__trend, .fgui-stat__valueModifiers: none in canonical specimenA11y: none in canonical specimen |
Key/value .fgui-kvExisting | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Tree .fgui-treeExisting | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-tree__children, .fgui-tree__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Timeline .fgui-timelineExisting | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-timeline__dot, .fgui-timeline__item, .fgui-timeline__meta, .fgui-timeline__titleModifiers: none in canonical specimenA11y: none in canonical specimen |
Calendar .fgui-calendarExisting | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-calendar__day, .fgui-calendar__grid, .fgui-calendar__head, .fgui-calendar__labelModifiers: none in canonical specimenA11y: none in canonical specimen |
Reorder list .fgui-reorder-listExisting | Basic | Basic · Data & structure | FG UI JavaScript enhanced | Hooks: data-fgui-sort-down, data-fgui-sort-up, data-fgui-sortableChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Value stack .fgui-value-stackNEW 1.1 | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-value-stack__label, .fgui-value-stack__meta, .fgui-value-stack__valueModifiers: none in canonical specimenA11y: none in canonical specimen |
Inline statistic .fgui-inline-statNEW 1.1 | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-inline-stat__label, .fgui-inline-stat__valueModifiers: none in canonical specimenA11y: none in canonical specimen |
Value delta .fgui-value-deltaNEW 1.1 | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-value-delta--negative, .fgui-value-delta--positiveA11y: none in canonical specimen |
Summary row .fgui-summary-rowNEW 1.1 | Basic | Basic · Data & structure | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-summary-row__label, .fgui-summary-row__valueModifiers: none in canonical specimenA11y: none in canonical specimen |
Mini chart .fgui-mini-chartExisting | Basic | Basic · Media & charts | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-mini-chart__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Bar chart .fgui-bar-chartExisting | Basic | Basic · Media & charts | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-bar-chart__bar--1, .fgui-bar-chart__bar--2, .fgui-bar-chart__bar--3, .fgui-bar-chart__bar--4, .fgui-bar-chart__bar--5, .fgui-bar-chart__bar--6, .fgui-bar-chart__bar--7Modifiers: none in canonical specimenA11y: none in canonical specimen |
Donut chart .fgui-donutExisting | Basic | Basic · Media & charts | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-donut--72A11y: none in canonical specimen |
Sparkline .fgui-sparklineExisting | Basic | Basic · Media & charts | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Carousel .fgui-carouselExisting | Basic | Basic · Media & charts | FG UI JavaScript enhanced | Hooks: data-fgui-carouselChildren: .fgui-carousel__content, .fgui-carousel__slide, .fgui-carousel__track, .fgui-carousel__viewport, .fgui-carousel__visual, .fgui-carousel__visual--blueModifiers: none in canonical specimenA11y: none in canonical specimen |
Countdown .fgui-countdownExisting | Basic | Basic · Media & charts | FG UI JavaScript enhanced | Hooks: data-fgui-countdown, data-fgui-countdown-days, data-fgui-countdown-hours, data-fgui-countdown-minutes, data-fgui-countdown-secondsChildren: .fgui-countdown__unitModifiers: none in canonical specimenA11y: none in canonical specimen |
Media frame .fgui-media-frameExisting | Basic | Basic · Media & charts | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-media-frame__placeholderModifiers: .fgui-media-frame--videoA11y: none in canonical specimen |
Hotspot .fgui-hotspotExisting | Basic | Basic · Media & charts | FG UI JavaScript enhanced | Hooks: data-fgui-popover-targetChildren: none in canonical specimenModifiers: .fgui-hotspot--one, .fgui-hotspot--twoA11y: aria-label |
Gallery .fgui-galleryExisting | Basic | Basic · Media & charts | FG UI JavaScript enhanced | Hooks: data-fgui-gallery, data-fgui-gallery-stage, data-fgui-gallery-thumbChildren: .fgui-gallery__media, .fgui-gallery__media--one, .fgui-gallery__stage, .fgui-gallery__thumb, .fgui-gallery__thumb--one, .fgui-gallery__thumb--three, .fgui-gallery__thumb--two, .fgui-gallery__thumbsModifiers: none in canonical specimenA11y: aria-label |
Back to top .fgui-back-to-topExisting | Basic | Basic · Media & charts | FG UI JavaScript enhanced | Hooks: data-fgui-back-to-topChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Content rule .fgui-content-ruleExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Heading group .fgui-heading-groupExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-heading-group__kickerModifiers: none in canonical specimenA11y: none in canonical specimen |
Icon label .fgui-icon-labelExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Logo tile .fgui-logo-tileExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Contact line .fgui-contact-lineExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-contact-line__iconModifiers: none in canonical specimenA11y: aria-hidden |
Social link .fgui-social-linkExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Address block .fgui-address-blockExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Media object .fgui-media-objectExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-media-object__body, .fgui-media-object__mediaModifiers: none in canonical specimenA11y: none in canonical specimen |
Figure .fgui-figureExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-figure__mediaModifiers: none in canonical specimenA11y: none in canonical specimen |
Pull quote .fgui-pullquoteExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Byline .fgui-bylineExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Metadata row .fgui-meta-rowExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Citation .fgui-citationExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-citation__indexModifiers: none in canonical specimenA11y: none in canonical specimen |
Inline code .fgui-inline-codeExisting | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Metadata list .fgui-meta-listNEW 1.1 | Basic | Basic · Website content & identity | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-meta-list__itemModifiers: none in canonical specimenA11y: aria-hidden |
Fieldset .fgui-fieldsetExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Choice card .fgui-choice-cardExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Rating input .fgui-rating-inputExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Number stepper .fgui-number-stepperExisting | Basic | Basic · Forms & interaction | FG UI JavaScript enhanced | Hooks: data-fgui-stepper-dec, data-fgui-stepper-incChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Currency input .fgui-currency-inputExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-currency-input__prefixModifiers: none in canonical specimenA11y: aria-label |
Phone input .fgui-phone-inputExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-phone-input__prefixModifiers: none in canonical specimenA11y: aria-label |
URL input .fgui-url-inputExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-url-input__prefixModifiers: none in canonical specimenA11y: aria-label |
Date range .fgui-date-rangeExisting | Basic | Basic · Forms & interaction | FG UI JavaScript enhanced | Hooks: data-fgui-date-clear, data-fgui-date-format, data-fgui-date-grid, data-fgui-date-input, data-fgui-date-label, data-fgui-date-month, data-fgui-date-next, data-fgui-date-picker, data-fgui-date-popover, data-fgui-date-prev, data-fgui-date-today, data-fgui-date-triggerChildren: .fgui-date-range__control, .fgui-date-range__picker, .fgui-date-range__separator, .fgui-date-range__valueModifiers: none in canonical specimenA11y: aria-expanded, aria-hidden, aria-label, hidden |
Search suggestion .fgui-search-suggestionExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-search-suggestion__iconModifiers: none in canonical specimenA11y: aria-hidden |
Form actions .fgui-form-actionsExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Donation choice .fgui-donation-choiceExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Vote control .fgui-vote-controlExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Reaction button .fgui-reaction-buttonExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Consent row .fgui-consent-rowExisting | Basic | Basic · Forms & interaction | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Copy field .fgui-copy-fieldExisting | Basic | Basic · Forms & interaction | FG UI JavaScript enhanced | Hooks: data-fgui-copyChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Combobox / autocomplete .fgui-comboboxExisting | Basic | Basic · Advanced form controls | FG UI JavaScript enhanced | Hooks: data-fgui-combobox, data-fgui-combobox-input, data-fgui-combobox-option, data-fgui-combobox-panelChildren: .fgui-combobox__option, .fgui-combobox__panelModifiers: none in canonical specimenA11y: aria-label, hidden, role |
Dual range .fgui-dual-rangeExisting | Basic | Basic · Advanced form controls | FG UI JavaScript enhanced | Hooks: data-fgui-dual-range, data-fgui-range-high, data-fgui-range-high-value, data-fgui-range-low, data-fgui-range-low-valueChildren: .fgui-dual-range__track, .fgui-dual-range__valuesModifiers: none in canonical specimenA11y: aria-label |
Character counter .fgui-character-counterExisting | Basic | Basic · Advanced form controls | FG UI JavaScript enhanced | Hooks: data-fgui-character-count, data-fgui-character-counter, data-fgui-character-inputChildren: .fgui-character-counter__metaModifiers: none in canonical specimenA11y: aria-label |
Duration input .fgui-duration-inputExisting | Basic | Basic · Advanced form controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Tree select .fgui-tree-selectExisting | Basic | Basic · Advanced form controls | FG UI JavaScript enhanced | Hooks: data-fgui-tree-select, data-fgui-tree-select-label, data-fgui-tree-select-panel, data-fgui-tree-select-triggerChildren: .fgui-tree-select__label, .fgui-tree-select__panel, .fgui-tree-select__triggerModifiers: none in canonical specimenA11y: aria-hidden, hidden |
Skip link .fgui-skip-linkExisting | Basic | Basic · Navigation & discovery | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Anchor navigation .fgui-anchor-navExisting | Basic | Basic · Navigation & discovery | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Link list .fgui-link-listExisting | Basic | Basic · Navigation & discovery | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Page dots .fgui-page-dotsExisting | Basic | Basic · Navigation & discovery | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Jump link .fgui-jump-linkExisting | Basic | Basic · Navigation & discovery | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Alphabet index .fgui-alpha-indexExisting | Basic | Basic · Navigation & discovery | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Pagination summary .fgui-pagination-summaryExisting | Basic | Basic · Navigation & discovery | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Price .fgui-priceExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Price range .fgui-price-rangeExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Stock .fgui-stockExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
SKU .fgui-skuExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Quantity selector .fgui-quantityExisting | Basic | Basic · Commerce & checkout | FG UI JavaScript enhanced | Hooks: data-fgui-stepper-dec, data-fgui-stepper-incChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Product swatch .fgui-product-swatchExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Option tile .fgui-option-tileExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Shipping estimate .fgui-shipping-estimateExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Payment method .fgui-payment-methodExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-payment-method__markModifiers: none in canonical specimenA11y: none in canonical specimen |
Discount .fgui-discountExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Tax note .fgui-tax-noteExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Delivery slot .fgui-delivery-slotExisting | Basic | Basic · Commerce & checkout | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Reading time .fgui-reading-timeExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Dateline .fgui-datelineExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Topic label .fgui-topic-labelExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Thumbnail .fgui-thumbnailExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Audio player .fgui-audio-playerExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-audio-player__play, .fgui-audio-player__trackModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Video player .fgui-video-playerExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-video-player__play, .fgui-video-player__trackModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Download link .fgui-download-linkExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Resource link .fgui-resource-linkExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Footnote .fgui-footnoteExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-footnote__markModifiers: none in canonical specimenA11y: none in canonical specimen |
Image stack .fgui-image-stackExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Opening hours .fgui-opening-hoursExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-opening-hours__rowModifiers: none in canonical specimenA11y: none in canonical specimen |
Appointment slot .fgui-appointment-slotExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Event date .fgui-event-dateExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Score .fgui-scoreExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Quiz option .fgui-quiz-optionExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Answer feedback .fgui-answer-feedbackExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Progress ring .fgui-progress-ringExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Donation amount .fgui-donation-amountExisting | Basic | Basic · Publishing, learning & giving | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Typing indicator .fgui-typing-indicatorExisting | Basic | Basic · Specialized controls | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-typing-indicator__dotModifiers: none in canonical specimenA11y: aria-hidden, aria-label, role |
Repeatable field .fgui-repeatableExisting | Basic | Basic · Specialized controls | FG UI JavaScript enhanced | Hooks: data-fgui-repeatable, data-fgui-repeatable-add, data-fgui-repeatable-remove, data-fgui-repeatable-row, data-fgui-repeatable-rows, data-fgui-repeatable-templateChildren: .fgui-repeatable__row, .fgui-repeatable__rowsModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Responsive action group .fgui-action-groupNEW 1.1 | Basic | Basic · Operational primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-action-group--mobile-stackA11y: none in canonical specimen |
Status row .fgui-status-rowNEW 1.1 | Basic | Basic · Operational primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-status-row__content, .fgui-status-row__metaModifiers: none in canonical specimenA11y: none in canonical specimen |
Integration status row .fgui-integration-rowNEW 1.1 | Basic | Basic · Operational primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-integration-row__content, .fgui-integration-row__markModifiers: none in canonical specimenA11y: none in canonical specimen |
Readiness row .fgui-readiness-rowNEW 1.1 | Basic | Basic · Operational primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-readiness-row__content, .fgui-readiness-row__indicatorModifiers: none in canonical specimenA11y: none in canonical specimen |
Comparison row .fgui-comparison-rowNEW 1.1 | Basic | Basic · Operational primitives | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-comparison-row__bar, .fgui-comparison-row__track, .fgui-comparison-row__valueModifiers: none in canonical specimenA11y: none in canonical specimen |
Admin page hero .fgui-admin-page-heroUPDATED 1.1 | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
App shell .fgui-app-shellExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Filter bar .fgui-filterbarExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Command palette .fgui-commandExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-command__item, .fgui-command__list, .fgui-command__searchModifiers: none in canonical specimenA11y: aria-label |
Kanban board .fgui-kanbanExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-kanban__card, .fgui-kanban__cards, .fgui-kanban__column, .fgui-kanban__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Frontend context header .fgui-frontend-context-headerExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Previous / next navigation .fgui-prev-nextExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-prev-next__btn, .fgui-prev-next__contextModifiers: none in canonical specimenA11y: none in canonical specimen |
Summary .fgui-summaryExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-summary__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Danger zone .fgui-danger-zoneExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Split view .fgui-split-viewExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-split-view__detail, .fgui-split-view__listModifiers: none in canonical specimenA11y: none in canonical specimen |
Table toolbar .fgui-table-toolbarExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Rich editor .fgui-editorExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-editor__body, .fgui-editor__footer, .fgui-editor__toolbarModifiers: none in canonical specimenA11y: none in canonical specimen |
Settings group .fgui-settings-groupExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Save bar .fgui-save-barExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Permission table .fgui-permission-tableExisting | Combined | Combined · App, admin & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-permission-table__head, .fgui-permission-table__rowModifiers: none in canonical specimenA11y: none in canonical specimen |
Admin dashboard overview .fgui-admin-dashboardUPDATED 1.1 | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-admin-dashboard__statsModifiers: none in canonical specimenA11y: none in canonical specimen |
Admin list view .fgui-admin-list-viewExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-admin-list-view__headModifiers: none in canonical specimenA11y: aria-label |
Admin edit view .fgui-admin-edit-viewExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-admin-edit-view__body, .fgui-admin-edit-view__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Admin configuration view .fgui-admin-config-viewExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-admin-config-view__body, .fgui-admin-config-view__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Data table .fgui-data-tableExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-data-table__foot, .fgui-data-table__headModifiers: none in canonical specimenA11y: aria-label |
Advanced filter builder .fgui-filter-builderExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-filter-builder__rowModifiers: none in canonical specimenA11y: aria-label |
Saved views .fgui-saved-viewsExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Bulk action bar .fgui-bulk-actionsExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Publishing panel .fgui-publishing-panelExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-publishing-panel__gridModifiers: none in canonical specimenA11y: aria-label |
Menu assignment .fgui-menu-assignmentExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-menu-assignment__listModifiers: none in canonical specimenA11y: none in canonical specimen |
Batch actions .fgui-batch-actionsExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-batch-actions__gridModifiers: none in canonical specimenA11y: aria-label |
Permissions editor .fgui-permissions-editorExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Extension status .fgui-extension-statusExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-extension-status__gridModifiers: none in canonical specimenA11y: none in canonical specimen |
Entity picker .fgui-entity-pickerExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-entity-picker__item, .fgui-entity-picker__resultsModifiers: none in canonical specimenA11y: aria-label |
Media library .fgui-media-libraryExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-media-library__grid, .fgui-media-library__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Audit log .fgui-audit-logExisting | Combined | Combined · Joomla, admin & data workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-audit-log__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
User card .fgui-user-cardExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-user-card__body, .fgui-user-card__meta, .fgui-user-card__nameModifiers: none in canonical specimenA11y: none in canonical specimen |
Post composer .fgui-composerExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-composer__footer, .fgui-composer__input, .fgui-composer__mainModifiers: none in canonical specimenA11y: aria-label |
Social post .fgui-postExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-post__actions, .fgui-post__author, .fgui-post__body, .fgui-post__header, .fgui-post__media, .fgui-post__meta, .fgui-post__nameModifiers: none in canonical specimenA11y: none in canonical specimen |
Activity feed .fgui-activityExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-activity__dot, .fgui-activity__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Chat .fgui-chatExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-chat__composer, .fgui-chat__header, .fgui-chat__messagesModifiers: none in canonical specimenA11y: aria-label |
Notification .fgui-notificationExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-notification__bodyModifiers: none in canonical specimenA11y: none in canonical specimen |
Comment thread .fgui-comment-threadExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Notification centre .fgui-notification-centreExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-notification-centre__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Bottom navigation .fgui-bottom-navExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Search result .fgui-resultExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Profile header .fgui-profile-headerExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-profile-header__metaModifiers: none in canonical specimenA11y: none in canonical specimen |
Article card .fgui-article-cardExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-article-card__mediaModifiers: none in canonical specimenA11y: none in canonical specimen |
Long-form article .fgui-articleExisting | Combined | Combined · Community & content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Community group .fgui-community-groupExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-community-group__head, .fgui-community-group__metaModifiers: none in canonical specimenA11y: none in canonical specimen |
Group header .fgui-group-headerExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-group-header__metaModifiers: none in canonical specimenA11y: none in canonical specimen |
Conversation list .fgui-conversation-listExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-conversation-list__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Event calendar .fgui-event-calendarExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-event-calendar__item, .fgui-event-calendar__listModifiers: none in canonical specimenA11y: none in canonical specimen |
Event detail .fgui-event-detailExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-event-detail__head, .fgui-event-detail__metaModifiers: none in canonical specimenA11y: none in canonical specimen |
Moderation queue .fgui-moderation-queueExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-moderation-queue__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Member management .fgui-member-managementExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-member-management__head, .fgui-member-management__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Invite members .fgui-invite-membersExisting | Combined | Combined · Community workflows | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-invite-members__entryModifiers: none in canonical specimenA11y: aria-label |
Site navigation .fgui-site-navExisting | Combined | Combined · Website & marketing | FG UI JavaScript enhanced | Hooks: data-fgui-menu-panel, data-fgui-menu-toggleChildren: .fgui-site-nav__linksModifiers: none in canonical specimenA11y: aria-current, aria-expanded, aria-haspopup, aria-hidden, aria-label, role |
Marketing hero .fgui-marketing-heroExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Feature card .fgui-featureExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-feature__iconModifiers: none in canonical specimenA11y: aria-hidden |
Testimonial .fgui-testimonialExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-testimonial__author, .fgui-testimonial__author-text, .fgui-testimonial__avatar, .fgui-testimonial__quoteModifiers: none in canonical specimenA11y: aria-hidden |
Call to action .fgui-ctaExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Newsletter .fgui-newsletterExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Site footer .fgui-site-footerExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-site-footer__brand, .fgui-site-footer__brand-markModifiers: none in canonical specimenA11y: aria-hidden |
Module / widget .fgui-moduleUPDATED 1.1 | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-module__body, .fgui-module__footer, .fgui-module__header, .fgui-module__titleModifiers: none in canonical specimenA11y: none in canonical specimen |
Announcement .fgui-announcementExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Popup card .fgui-popup-cardExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-popup-card__closeModifiers: none in canonical specimenA11y: aria-label |
Cookie banner .fgui-cookie-bannerExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Special state page .fgui-special-stateExisting | Combined | Combined · Website & marketing | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Mega menu .fgui-mega-menuExisting | Combined | Combined · Website building | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-mega-menu__column, .fgui-mega-menu__featureModifiers: none in canonical specimenA11y: none in canonical specimen |
Mobile navigation .fgui-mobile-navExisting | Combined | Combined · Website building | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-mobile-nav__head, .fgui-mobile-nav__linksModifiers: none in canonical specimenA11y: aria-label |
Global search .fgui-global-searchExisting | Combined | Combined · Website building | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-global-search__result, .fgui-global-search__resultsModifiers: none in canonical specimenA11y: aria-label |
Cookie preferences .fgui-cookie-preferencesExisting | Combined | Combined · Website building | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-cookie-preferences__rowModifiers: none in canonical specimenA11y: aria-label |
FAQ section .fgui-faq-sectionExisting | Combined | Combined · Website building | FG UI JavaScript enhanced | Hooks: data-fgui-accordion-triggerChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Contact section .fgui-contact-sectionExisting | Combined | Combined · Website building | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-contact-section__details, .fgui-contact-section__headModifiers: none in canonical specimenA11y: aria-label |
Pricing section .fgui-pricing-sectionExisting | Combined | Combined · Website building | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Feature grid .fgui-feature-gridExisting | Combined | Combined · Website building | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Authentication shell .fgui-auth-shellExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Authentication shell alternative .fgui-auth-shell-altNEW 1.1 | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Authentication card .fgui-auth-cardExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-auth-card__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Authentication box .fgui-auth-boxExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Security card .fgui-security-cardExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-security-card__iconModifiers: none in canonical specimenA11y: aria-hidden |
Recovery codes .fgui-recovery-codesExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Device list .fgui-device-listExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Onboarding .fgui-onboardingExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-onboarding__progressModifiers: none in canonical specimenA11y: none in canonical specimen |
System state .fgui-system-stateExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-system-state__codeModifiers: none in canonical specimenA11y: none in canonical specimen |
Connection state .fgui-connection-stateExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-connection-state__dotModifiers: .fgui-connection-state--offlineA11y: none in canonical specimen |
Maintenance state .fgui-maintenance-stateExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-maintenance-state__iconModifiers: none in canonical specimenA11y: none in canonical specimen |
Session expired .fgui-session-expiredExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-session-expired__iconModifiers: none in canonical specimenA11y: none in canonical specimen |
Secret field .fgui-secret-fieldExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Webhook row .fgui-webhook-rowExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-webhook-row__icon, .fgui-webhook-row__mainModifiers: none in canonical specimenA11y: none in canonical specimen |
Help card .fgui-help-cardExisting | Combined | Combined · Authentication, security & system | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-help-card__iconModifiers: none in canonical specimenA11y: none in canonical specimen |
Pricing toggle .fgui-pricing-toggleExisting | Combined | Combined · Pricing & commerce | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Price card .fgui-price-cardExisting | Combined | Combined · Pricing & commerce | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-price-card__priceModifiers: none in canonical specimenA11y: none in canonical specimen |
Product card .fgui-product-cardExisting | Combined | Combined · Pricing & commerce | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-product-card__body, .fgui-product-card__media, .fgui-product-card__metaModifiers: none in canonical specimenA11y: none in canonical specimen |
Cart line .fgui-cart-lineExisting | Combined | Combined · Pricing & commerce | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Order summary .fgui-order-summaryExisting | Combined | Combined · Pricing & commerce | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Code block .fgui-code-blockExisting | Combined | Combined · Developer, filters & reporting | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-code-block__barModifiers: none in canonical specimenA11y: none in canonical specimen |
Log viewer .fgui-log-viewerExisting | Combined | Combined · Developer, filters & reporting | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Rating summary .fgui-rating-summaryExisting | Combined | Combined · Developer, filters & reporting | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-rating-summary__scoreModifiers: none in canonical specimenA11y: none in canonical specimen |
Filter groups .fgui-filter-groupsExisting | Combined | Combined · Developer, filters & reporting | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Service card .fgui-service-cardExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-service-card__iconModifiers: none in canonical specimenA11y: aria-hidden |
Services list .fgui-services-listExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Business profile .fgui-business-profileExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-business-profile__markModifiers: none in canonical specimenA11y: none in canonical specimen |
Contact card .fgui-contact-cardExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Hours card .fgui-hours-cardExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Location card .fgui-location-cardExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-location-card__mapModifiers: none in canonical specimenA11y: aria-hidden |
Booking card .fgui-booking-cardExisting | Combined | Combined · Small business & local services | FG UI JavaScript enhanced | Hooks: data-fgui-date-clear, data-fgui-date-grid, data-fgui-date-input, data-fgui-date-label, data-fgui-date-month, data-fgui-date-next, data-fgui-date-picker, data-fgui-date-popover, data-fgui-date-prev, data-fgui-date-today, data-fgui-date-triggerChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-expanded, aria-hidden, aria-label, hidden |
Team member card .fgui-team-cardExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Review card .fgui-review-cardExisting | Combined | Combined · Small business & local services | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-review-card__ratingModifiers: none in canonical specimenA11y: none in canonical specimen |
Category card .fgui-category-cardExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-category-card__mediaModifiers: none in canonical specimenA11y: aria-hidden |
Product gallery .fgui-product-galleryExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-product-gallery__main, .fgui-product-gallery__thumb, .fgui-product-gallery__thumbsModifiers: none in canonical specimenA11y: none in canonical specimen |
Product detail .fgui-product-detailExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Variant selector .fgui-variant-selectorExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Mini cart .fgui-mini-cartExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-mini-cart__itemsModifiers: none in canonical specimenA11y: none in canonical specimen |
Cart summary .fgui-cart-summaryExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-cart-summary__row, .fgui-cart-summary__totalModifiers: none in canonical specimenA11y: none in canonical specimen |
Checkout form .fgui-checkoutExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Payment methods .fgui-payment-methodsExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Order confirmation .fgui-order-confirmationExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-order-confirmation__iconModifiers: none in canonical specimenA11y: aria-hidden |
Wishlist item .fgui-wishlist-itemExisting | Combined | Combined · E-commerce & retail stores | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Blog hero .fgui-blog-heroExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-blog-hero__visualModifiers: none in canonical specimenA11y: none in canonical specimen |
Featured post .fgui-featured-postExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-featured-post__mediaModifiers: none in canonical specimenA11y: none in canonical specimen |
Author card .fgui-author-cardExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Table of contents .fgui-table-of-contentsExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Share bar .fgui-share-barExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-share-bar__actionsModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Related posts .fgui-related-postsExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Content series .fgui-content-seriesExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-content-series__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Archive panel .fgui-archive-panelExisting | Combined | Combined · Personal blogs & niche content | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-archive-panel__rowModifiers: none in canonical specimenA11y: none in canonical specimen |
Resume header .fgui-resume-headerExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-resume-header__avatarModifiers: none in canonical specimenA11y: none in canonical specimen |
Project card .fgui-project-cardExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-project-card__body, .fgui-project-card__mediaModifiers: none in canonical specimenA11y: none in canonical specimen |
Project gallery .fgui-project-galleryExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Case study .fgui-case-studyExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-case-study__metricsModifiers: none in canonical specimenA11y: none in canonical specimen |
Experience list .fgui-experience-listExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-experience-list__date, .fgui-experience-list__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Skills panel .fgui-skills-panelExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-skills-panel__listModifiers: none in canonical specimenA11y: none in canonical specimen |
Client logo cloud .fgui-logo-cloudExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Availability card .fgui-availability-cardExisting | Combined | Combined · Professional portfolios & CVs | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Leadership card .fgui-leadership-cardExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Organisation chart .fgui-org-chartExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-org-chart__level, .fgui-org-chart__nodeModifiers: none in canonical specimenA11y: none in canonical specimen |
KPI strip .fgui-kpi-stripExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Office card .fgui-office-cardExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Job card .fgui-job-cardExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Job detail .fgui-job-detailExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Press release .fgui-press-releaseExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Press kit .fgui-press-kitExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-press-kit__downloadsModifiers: none in canonical specimenA11y: none in canonical specimen |
Compliance panel .fgui-compliance-panelExisting | Combined | Combined · Corporate & enterprise websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-compliance-panel__itemModifiers: none in canonical specimenA11y: aria-hidden |
Lead form .fgui-lead-formExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Trust bar .fgui-trust-barExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Benefit list .fgui-benefit-listExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-benefit-list__icon, .fgui-benefit-list__itemModifiers: none in canonical specimenA11y: aria-hidden |
Comparison table .fgui-comparison-tableExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Guarantee card .fgui-guarantee-cardExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-guarantee-card__iconModifiers: none in canonical specimenA11y: aria-hidden |
Social proof band .fgui-social-proofExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Product showcase .fgui-product-showcaseExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-product-showcase__visualModifiers: none in canonical specimenA11y: none in canonical specimen |
Conversion panel .fgui-conversion-panelExisting | Combined | Combined · Landing pages & product microsites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Forum category .fgui-forum-categoryExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Forum topic .fgui-forum-topicExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Forum post .fgui-forum-postExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-forum-post__authorModifiers: none in canonical specimenA11y: none in canonical specimen |
Member directory .fgui-member-directoryExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-member-directory__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Community sidebar .fgui-community-sidebarExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Community event .fgui-community-eventExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Poll .fgui-pollExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-poll__optionModifiers: none in canonical specimenA11y: none in canonical specimen |
Reaction bar .fgui-reaction-barExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Moderation panel .fgui-moderation-panelExisting | Combined | Combined · Online communities & forums | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Course card .fgui-course-cardExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-course-card__icon, .fgui-course-card__metaModifiers: none in canonical specimenA11y: aria-hidden |
Lesson card .fgui-lesson-cardExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Curriculum .fgui-curriculumExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-curriculum__moduleModifiers: none in canonical specimenA11y: none in canonical specimen |
Instructor card .fgui-instructor-cardExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Quiz card .fgui-quiz-cardExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Certificate card .fgui-certificate-cardExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden |
Learning progress .fgui-learning-progressExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-learning-progress__statsModifiers: none in canonical specimenA11y: none in canonical specimen |
Resource list .fgui-resource-listExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Enrollment card .fgui-enrollment-cardExisting | Combined | Combined · Educational & e-learning platforms | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Article hero .fgui-article-heroExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Breaking news banner .fgui-breaking-newsExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Trending list .fgui-trending-listExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Category navigation .fgui-category-navExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Publication masthead .fgui-mastheadExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-masthead__meta, .fgui-masthead__titleModifiers: none in canonical specimenA11y: none in canonical specimen |
Issue cover .fgui-issue-coverExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Live update .fgui-live-updateExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-live-update__timeModifiers: none in canonical specimenA11y: none in canonical specimen |
News grid .fgui-news-gridExisting | Combined | Combined · News, magazine & digital publications | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-news-grid__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Donation card .fgui-donation-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Campaign card .fgui-campaign-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-campaign-card__body, .fgui-campaign-card__mediaModifiers: none in canonical specimenA11y: none in canonical specimen |
Volunteer card .fgui-volunteer-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Ministry card .fgui-ministry-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-ministry-card__iconModifiers: none in canonical specimenA11y: aria-hidden |
Sermon card .fgui-sermon-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-sermon-card__mediaModifiers: none in canonical specimenA11y: aria-hidden |
Scripture card .fgui-scripture-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Prayer card .fgui-prayer-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: none in canonical specimen |
Impact card .fgui-impact-cardExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-impact-card__iconModifiers: none in canonical specimenA11y: aria-hidden |
Donation form .fgui-donation-formExisting | Combined | Combined · Non-profit, charity & religious websites | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-donation-form__amountsModifiers: none in canonical specimenA11y: aria-label |
Action hub .fgui-action-hubNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-action-hub__itemModifiers: .fgui-action-hub--compactA11y: aria-label |
Needs attention .fgui-needs-attentionNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-needs-attention__head, .fgui-needs-attention__listModifiers: none in canonical specimenA11y: aria-label |
Upcoming list .fgui-upcoming-listNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-upcoming-list__content, .fgui-upcoming-list__date, .fgui-upcoming-list__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Availability picker .fgui-availability-pickerNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-availability-picker__dates, .fgui-availability-picker__slot, .fgui-availability-picker__slotsModifiers: none in canonical specimenA11y: aria-pressed |
Status flow .fgui-status-flowNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-status-flow__stepModifiers: none in canonical specimenA11y: aria-current, aria-label |
Requirement card .fgui-requirement-cardNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-requirement-card__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Account access panel .fgui-account-accessNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-account-access__optionModifiers: none in canonical specimenA11y: none in canonical specimen |
Identity summary .fgui-identity-summaryNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-identity-summary__contentModifiers: none in canonical specimenA11y: none in canonical specimen |
Balance summary .fgui-balance-summaryNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-balance-summary__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Price breakdown .fgui-price-breakdownNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-price-breakdown__rowModifiers: none in canonical specimenA11y: none in canonical specimen |
Contextual help .fgui-contextual-helpNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-contextual-help__contentModifiers: none in canonical specimenA11y: none in canonical specimen |
Live agent shell .fgui-live-agent-shellNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-live-agent-shell__composer, .fgui-live-agent-shell__head, .fgui-live-agent-shell__message, .fgui-live-agent-shell__message--self, .fgui-live-agent-shell__transcriptModifiers: none in canonical specimenA11y: aria-label, aria-live |
Readiness card .fgui-readiness-cardNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-readiness-card__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Secure document row .fgui-secure-document-rowNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-secure-document-row__content, .fgui-secure-document-row__iconModifiers: none in canonical specimenA11y: none in canonical specimen |
Evidence upload .fgui-evidence-uploadNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-evidence-upload__previewModifiers: none in canonical specimenA11y: none in canonical specimen |
Privacy request .fgui-privacy-requestNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-privacy-request__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Workspace identity .fgui-workspace-identityNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-workspace-identity__mainModifiers: none in canonical specimenA11y: none in canonical specimen |
Schedule agenda .fgui-schedule-agendaNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-schedule-agenda__content, .fgui-schedule-agenda__group, .fgui-schedule-agenda__timeModifiers: none in canonical specimenA11y: none in canonical specimen |
Resource assignment .fgui-resource-assignmentNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-resource-assignment__grid, .fgui-resource-assignment__itemModifiers: none in canonical specimenA11y: none in canonical specimen |
Job status .fgui-job-statusNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-job-status__head, .fgui-job-status__metaModifiers: none in canonical specimenA11y: none in canonical specimen |
Dashboard empty section .fgui-dashboard-emptyNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-dashboard-empty__contentModifiers: none in canonical specimenA11y: none in canonical specimen |
Metric and action card .fgui-metric-actionNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-metric-action__metricModifiers: none in canonical specimenA11y: none in canonical specimen |
Mobile action dock .fgui-mobile-action-dockNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Time context .fgui-time-contextNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-time-context__zoneModifiers: none in canonical specimenA11y: none in canonical specimen |
Allocation summary .fgui-allocation-summaryNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-allocation-summary__bar, .fgui-allocation-summary__legendModifiers: none in canonical specimenA11y: aria-label |
Compliance matrix .fgui-compliance-matrixNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-compliance-matrix__cell, .fgui-compliance-matrix__rowModifiers: none in canonical specimenA11y: aria-label, role |
Capacity forecast .fgui-capacity-forecastNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-capacity-forecast__bar, .fgui-capacity-forecast__gridModifiers: none in canonical specimenA11y: none in canonical specimen |
Import preview .fgui-import-previewNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-import-preview__map, .fgui-import-preview__sampleModifiers: none in canonical specimenA11y: aria-hidden |
Controlled exception panel .fgui-exception-panelNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-exception-panel__headModifiers: none in canonical specimenA11y: none in canonical specimen |
Workflow evidence .fgui-workflow-evidenceNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-workflow-evidence__index, .fgui-workflow-evidence__stageModifiers: none in canonical specimenA11y: none in canonical specimen |
Guided tour .fgui-guided-tourNEW 1.1 | Combined | Combined · Operations, portals & workflow | FG UI JavaScript enhanced | Hooks: data-fgui-tour, data-fgui-tour-back, data-fgui-tour-close, data-fgui-tour-counter, data-fgui-tour-live, data-fgui-tour-next, data-fgui-tour-panel, data-fgui-tour-spotlight, data-fgui-tour-start, data-fgui-tour-step, data-fgui-tour-target, data-fgui-tour-target-refChildren: .fgui-guided-tour__panel, .fgui-guided-tour__spotlight, .fgui-guided-tour__stepModifiers: none in canonical specimenA11y: aria-controls, aria-expanded, aria-hidden, aria-live, hidden |
Metric card .fgui-metric-cardNEW 1.1 | Combined | Combined · Operations, portals & workflow | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-metric-card__icon, .fgui-metric-card__label, .fgui-metric-card__meta, .fgui-metric-card__top, .fgui-metric-card__valueModifiers: none in canonical specimenA11y: aria-hidden |
Edge navigation .fgui-edge-navNEW 1.2 | Basic | Basic · Reader & selection tools | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-edge-nav__controlModifiers: none in canonical specimenA11y: aria-label |
Text size control .fgui-text-sizeNEW 1.2 | Basic | Basic · Reader & selection tools | FG UI JavaScript enhanced | Hooks: data-fgui-target, data-fgui-text-size-control, data-fgui-text-size-reset, data-fgui-text-size-valueChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label, aria-pressed |
Reader navigation selector .fgui-reader-nav-modeNEW 1.2 | Basic | Basic · Reader & selection tools | FG UI JavaScript enhanced | Hooks: data-fgui-reader-nav-modeChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Reader tool display selector .fgui-action-displayNEW 1.2 | Basic | Basic · Reader & selection tools | FG UI JavaScript enhanced | Hooks: data-fgui-action-displayChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Selection context menu .fgui-selection-menuNEW 1.2 | Basic | Basic · Reader & selection tools | FG UI JavaScript enhanced | Hooks: data-fgui-selection-menuChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label, role |
Selection action bar .fgui-selection-actionsNEW 1.2 | Basic | Basic · Reader & selection tools | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label, role |
Highlight palette .fgui-highlight-paletteNEW 1.2 | Basic | Basic · Reader & selection tools | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-highlight-palette__swatch, .fgui-highlight-palette__swatch--blue, .fgui-highlight-palette__swatch--green, .fgui-highlight-palette__swatch--pink, .fgui-highlight-palette__swatch--yellowModifiers: none in canonical specimenA11y: aria-label, role |
Text annotation .fgui-annotationNEW 1.2 | Basic | Basic · Reader & selection tools | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-annotation__markerModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Bookmark toggle .fgui-bookmarkNEW 1.2 | Basic | Basic · Reader & selection tools | FG UI JavaScript enhanced | Hooks: data-fgui-bookmarkChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden, aria-label, aria-pressed |
Theme switcher .fgui-theme-switcherNEW 1.2 | Basic | Basic · Theme & preferences | FG UI JavaScript enhanced | Hooks: data-fgui-theme-switcher, data-fgui-theme-valueChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label, aria-pressed, role |
Theme compatibility status .fgui-theme-compatibilityNEW 1.2 | Basic | Basic · Theme & preferences | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
User preference card .fgui-preference-cardNEW 1.2 | Basic | Basic · Theme & preferences | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Health finding .fgui-health-findingNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-health-finding__iconModifiers: .fgui-health-finding--warningA11y: aria-hidden, aria-label |
Maintenance scan bar .fgui-scan-barNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Maintenance check card .fgui-maintenance-checkNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Verification result .fgui-verification-resultNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-verification-result--successA11y: aria-hidden, aria-label |
Environment diagnostics .fgui-environment-statusNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Package status .fgui-package-statusNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Batch progress .fgui-batch-progressNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Lock / checkout status .fgui-lock-statusNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
API health card .fgui-api-healthNEW 1.2 | Basic | Basic · Health, maintenance & diagnostics | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Button alternative .fgui-btn-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-btn-alt--primaryA11y: aria-label |
Icon button alternative .fgui-icon-btn-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Card alternative .fgui-card-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Choice card alternative .fgui-choice-card-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Input alternative .fgui-input-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Textarea alternative .fgui-textarea-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Select alternative .fgui-select-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Custom select alternative .fgui-custom-select-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Search alternative .fgui-search-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Alert alternative .fgui-alert-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden, aria-label, role |
Status alternative .fgui-status-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: .fgui-status-alt--successA11y: aria-hidden, aria-label |
Tabs alternative .fgui-tabs-altNEW 1.2 | Basic | Basic · Alternative collection | FG UI JavaScript enhanced | Hooks: data-fgui-tab, data-fgui-tab-panel, data-fgui-tabsChildren: .fgui-tabs-alt__listModifiers: none in canonical specimenA11y: aria-label, aria-selected, hidden, role |
Accordion alternative .fgui-accordion-altNEW 1.2 | Basic | Basic · Alternative collection | FG UI JavaScript enhanced | Hooks: data-fgui-accordion-indicator, data-fgui-accordion-triggerChildren: .fgui-accordion-alt__item, .fgui-accordion-alt__panel, .fgui-accordion-alt__triggerModifiers: none in canonical specimenA11y: aria-label |
Modal alternative .fgui-modal-altNEW 1.2 | Basic | Basic · Alternative collection | FG UI JavaScript enhanced | Hooks: data-fgui-modal-close, data-fgui-modal-openChildren: .fgui-modal-alt__headerModifiers: none in canonical specimenA11y: aria-hidden, aria-label, aria-modal, role |
Toast alternative .fgui-toast-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-hidden, aria-label, role |
Notification alternative .fgui-notification-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-notification-alt__markerModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Table alternative .fgui-table-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Toolbar alternative .fgui-toolbar-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-toolbar-alt__spacerModifiers: none in canonical specimenA11y: aria-label, role |
Pagination alternative .fgui-pagination-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-current, aria-label |
Side navigation alternative .fgui-side-nav-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Settings group alternative .fgui-settings-group-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Progress alternative .fgui-progress-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Empty state alternative .fgui-empty-state-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-empty-state-alt__iconModifiers: none in canonical specimenA11y: aria-hidden, aria-label |
Danger zone alternative .fgui-danger-zone-altNEW 1.2 | Basic | Basic · Alternative collection | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Reader settings sheet .fgui-reader-settingsNEW 1.2 | Combined | Combined · Reader & theme experiences | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-reader-settings__headerModifiers: none in canonical specimenA11y: aria-label, role |
Reading shell .fgui-reading-shellNEW 1.2 | Combined | Combined · Reader & theme experiences | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-reading-shell__bodyModifiers: none in canonical specimenA11y: aria-label |
Paged / book reader .fgui-page-readerNEW 1.2 | Combined | Combined · Reader & theme experiences | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-page-reader__pageModifiers: none in canonical specimenA11y: aria-label |
Theme card .fgui-theme-cardNEW 1.2 | Combined | Combined · Reader & theme experiences | FG UI JavaScript enhanced | Hooks: data-fgui-theme-previewChildren: .fgui-theme-card__previewModifiers: none in canonical specimenA11y: aria-label |
Theme gallery .fgui-theme-galleryNEW 1.2 | Combined | Combined · Reader & theme experiences | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Theme preview .fgui-theme-previewNEW 1.2 | Combined | Combined · Reader & theme experiences | FG UI JavaScript enhanced | Hooks: data-fgui-theme-preview-clear, data-fgui-theme-valueChildren: .fgui-theme-preview__bar, .fgui-theme-preview__canvasModifiers: none in canonical specimenA11y: aria-label |
Theme installer .fgui-theme-installerNEW 1.2 | Combined | Combined · Reader & theme experiences | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Health dashboard .fgui-health-dashboardNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-health-dashboard__findingsModifiers: none in canonical specimenA11y: aria-label |
Integrity report .fgui-integrity-reportNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Safe repair panel .fgui-safe-repairNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-safe-repair__verificationModifiers: none in canonical specimenA11y: aria-label |
Package dependency map .fgui-package-dependenciesNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-package-dependencies__branch, .fgui-package-dependencies__nodeModifiers: none in canonical specimenA11y: aria-label |
Data package status .fgui-data-packageNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-data-package__metaModifiers: none in canonical specimenA11y: aria-label |
Install completion .fgui-install-resultNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-install-result__iconModifiers: .fgui-install-result--successA11y: aria-hidden, aria-label |
Update report .fgui-update-reportNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Migration assistant .fgui-migration-assistantNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Safe uninstall wizard .fgui-uninstall-wizardNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
API tester .fgui-api-testerNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: .fgui-api-tester__resultModifiers: none in canonical specimenA11y: aria-label |
Integration tester .fgui-integration-testerNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
Preference manager .fgui-preference-managerNEW 1.2 | Combined | Combined · Operations, maintenance & integrations | CSS-first / no JS hook in canonical specimen | Hooks: none in canonical specimenChildren: none in canonical specimenModifiers: none in canonical specimenA11y: aria-label |
See them visually
A reference is useful. A live showcase is better.
Use the component showcase and What’s New in 1.2 page to explore the current Stable runtime and the preserved 1.1 compatibility baseline.