--- title: "Components" manual: "Frontend Theme for Extension Development" version: "main" source: "Components/Index.rst" modified: "2026-09-17T04:52:50+00:00" --- # Components The stylesheet the theme ships is a component library. Every class carries a `theme-` prefix, and every component states the markup it expects in the header comment of its own SCSS file below `Resources/Private/Scss/`. That comment is the contract a template is written against; this page is the overview. The `/styleguide` page of the seeded demo tree renders every component, in the appearance and palette currently selected - see [Feature: A styleguide page](../Changelog/2.0/Feature-Styleguide.html#feature-styleguide). Every component reads its values through custom properties with a fallback, so a site package re-themes one component or all of them from its own CSS, without rebuilding the SCSS - see [Feature: Component library](../Changelog/2.0/Feature-ComponentLibrary.html#feature-component-library). Every state the library draws in colour - a selected tab, a pressed toggle - also survives forced colours, the high contrast themes of the operating system, where it is drawn in the system highlight colour instead. ## What the library contains | Group | Components | | --- | --- | | Content | Accordion, alert, author, badge, card - in a grid, with a column count or as a row that scrolls sideways -, code block, description list - with a divided variant for key and value - call to action, divider, feature and feature grid, figure, file list, hero, list, list group, media object, panel, pricing, quote, stats, steps, table, teaser, timeline, and the text roles display, lead and eyebrow | | Data display | Avatar and avatar group, tag list, progress bar, meter | | Actions | Button - with a link and an icon variant, pressed and busy states, and an attached button group - and the close button | | Icons | The solid icons of Font Awesome Free, inline, see [Icons](#icons) | | Interactive | Tabs, dialog, tooltip, toggletip | | Forms | Controls, field, input group, choice group, validation | | Navigation and page | Main and sub navigation, breadcrumb, pagination, content menu - which is also the table of contents of a page - language menu, dropdown, skip link, gallery, the content element wrapper, site header and site footer | ## Icons The theme ships the complete solid style of Font Awesome Free 7.3.1 - 2001 icons - below `Resources/Public/Icons/FontAwesome/Solid/`, and draws every icon of its own from it. A template renders one with the ViewHelper ``, by the file name of the icon without `.svg`: ```html ``` The icon is inlined as SVG: no webfont, no CDN and no request is involved. It is as large as the text around it and takes the colour of that text. Without `label` it is decoration and hidden from screen readers - the right choice next to text or inside a button that has a name of its own. With `label` it is an image with that name. An icon name that does not exist stops the rendering with an exception rather than leaving a gap. The optional `class` argument adds classes to `theme-icon`. A component that gives icons a fixed size sets the custom property `--theme-icon-size` on the element around them. The icons are licensed under CC BY 4.0; the npm package they come from declares `CC-BY-4.0 AND OFL-1.1 AND MIT`, of which only the icons ship here. The licence of the package and an attribution ship next to them, in `Resources/Public/Icons/FontAwesome/LICENSE.txt` and `Resources/Public/Icons/FontAwesome/ATTRIBUTION.txt`. Every icon file keeps the attribution comment it comes with, and so does every icon on a rendered page. The extension itself stays GPL-2.0-or-later. In the backend, an editor picks an icon from a select list grouped by the categories of Font Awesome, with a grid of the icons under it; page TSconfig `keepItems` narrows the list per field - see [Feature: Editors pick an icon by name](../Changelog/2.0/Feature-IconPicker.html#feature-icon-picker). ## Components that need JavaScript Three components need the theme's script, `Resources/Public/JavaScript/theme.js`, which the page includes as a module. Each of them stays usable without it - with JavaScript switched off, and with JavaScript on but the script failing to load. The dialog opener follows the `data-js` attribute that the theme's inline head script sets on the `` element before the page is painted, the same marker the main navigation's toggle depends on. The tabs follow a marker of their own, `data-theme-tabs-bound`, which only the theme's script sets on the tab group once it has bound it. | Component | With JavaScript | Without JavaScript | | --- | --- | --- | | Tabs | The WAI-ARIA tabs pattern: the arrow keys, Home and End move between the tabs, one panel is shown at a time. | No tab list. Every panel is shown, each under its own heading, and none of them claims to be a tab panel. | | Dialog | A button carrying `data-theme-dialog-open` opens the `

Site set

Static include

Reseed the instance?

` is the body size at the bold weight; `

` and `

` are smaller, in capitals and with a wider letter spacing, and `

Release notes for 2.0