PHPackages contao-themes-net/theme-components-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. contao-themes-net/theme-components-bundle ActiveContao-bundle[Templating & Views](/categories/templating) contao-themes-net/theme-components-bundle ========================================= theme components bundle for Contao 4 1.8.3(4mo ago)228.4k↑28.9%5proprietaryPHPPHP ^8.1 Since Oct 23Pushed 1mo ago2 watchersCompare [ Source](https://github.com/contao-themes-net/theme-components-bundle)[ Packagist](https://packagist.org/packages/contao-themes-net/theme-components-bundle)[ Docs](https://contao-themes.net)[ Fund](https://contao-themes.net/sponsoring.html)[ Patreon](https://www.patreon.com/user?u=28241718)[ RSS](/packages/contao-themes-net-theme-components-bundle/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (6)Versions (53)Used By (5) theme-components-bundle ======================= [](#theme-components-bundle) A collection of elements without styling for our Contao Themes. Contained Elements: - Contentbox - Teaserbox - Price Table - Feature Element - Slider Element - Content Wrapper - Contrast switcher icon - Size icon insert tag with backlink Available insert tags --------------------- [](#available-insert-tags) ``` {{comp::contrast}} {{comp::size::barrierefreiheit.html#fontSize}} ``` Where ***link*** can be replaced by a ***alias*** or a ***Uri*** in the comp::size::link insert tag. If no ***link*** is specified, the tag generates a link to the root page. The insert tags can be placed anywhere you like, and the appearance depends on your theme or styling. This symbol stands for ***switch between high and low contrast***: [![img.png](https://user-images.githubusercontent.com/13376233/224686641-3b85ab24-8e71-497a-b480-511e4d06f1b0.png)](https://user-images.githubusercontent.com/13376233/224686641-3b85ab24-8e71-497a-b480-511e4d06f1b0.png) and this for ***change font size***: [![img_1.png](https://user-images.githubusercontent.com/13376233/224646586-0caf797b-51bd-4cc9-b95d-6e339487bc60.png)](https://user-images.githubusercontent.com/13376233/224646586-0caf797b-51bd-4cc9-b95d-6e339487bc60.png) But these are only two examples. The appearance depends on your theme and styling. The SVG icons are taken from: (See also the enclosed license under [LICENSE\_MATERIAL\_DESIGN\_ICONS](LICENSE_MATERIAL_DESIGN_ICONS)). Available CSS classes --------------------- [](#available-css-classes) The bundle provides several CSS classes for high contrast mode: ``` # excerpt .hc-invert, .hc-invert-pictures img, .hc-invert-pictures svg { filter: invert(1); } .hc-greyscale, .hc-greyscale-pictures img, .hc-greyscale-pictures svg { filter: grayscale(1); } .hc-bg-black { background: black !important; color: white !important; } ``` These classes can be used to control how the website behaves when high contrast is applied. All classes can be found [here](public/scss/theme-components.scss). Configuration ------------- [](#configuration) You have the option to configure the use of ***high contrast***, ***auto high contrast*** and ***font size*** to a small extent. This is done in the start point of the website for the entire page tree below. You can find the options under ► ***pages*** ► ***website start page*** under the legend ► ***WCAG settings (Web Content Accessibility Guidelines)***. WCAG here stands for the official [Web Content Accessibility Guide](https://www.w3.org/Translations/WCAG20-de/). The difference between ***High Contrast*** and ***Auto High Contrast*** is that High Contrast allows users to manually activate the contrast mode with a click, while Auto High Contrast automatically enables the contrast mode when the system’s dark mode is active. [![wcag-settings](https://private-user-images.githubusercontent.com/17127525/522939176-59f5cc3c-9e27-4826-9e6c-5a284b19b0c9.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUzNTg2MzYsIm5iZiI6MTc3NTM1ODMzNiwicGF0aCI6Ii8xNzEyNzUyNS81MjI5MzkxNzYtNTlmNWNjM2MtOWUyNy00ODI2LTllNmMtNWEyODRiMTliMGM5LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA1VDAzMDUzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA2MjMwMDk2ZDRmNWQ5ZWU4N2NkNDE0MGNkODMxZjIwYWViZjg4Yzg1ODExNWVlYzQzYzE2N2Y1MGEwMTM5ZTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.bpXEEY6TW-hUZQNDGDIeeHxrcycfBrQDzRs9fi1BJAY)](https://private-user-images.githubusercontent.com/17127525/522939176-59f5cc3c-9e27-4826-9e6c-5a284b19b0c9.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUzNTg2MzYsIm5iZiI6MTc3NTM1ODMzNiwicGF0aCI6Ii8xNzEyNzUyNS81MjI5MzkxNzYtNTlmNWNjM2MtOWUyNy00ODI2LTllNmMtNWEyODRiMTliMGM5LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA1VDAzMDUzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA2MjMwMDk2ZDRmNWQ5ZWU4N2NkNDE0MGNkODMxZjIwYWViZjg4Yzg1ODExNWVlYzQzYzE2N2Y1MGEwMTM5ZTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.bpXEEY6TW-hUZQNDGDIeeHxrcycfBrQDzRs9fi1BJAY) Here you can de/activate features (i.e. insert tags) individually and define the assignment between the ***page explaining the font size change*** and the icon. German ====== [](#german) Dieses Bundle bringt verschiedene Elemente mit Templates (ohne Styling) für unsere Contao Themes mit. Enthaltene Elemente: - Contentbox - Teaserbox - Preistabelle - Feature-Element - Slider-Element - Inhaltscontainer - Kontrastwechsler Icon - Insert Tag für Schriftgröße mit Backlink-Funktion Verfügbare Insert-Tags ---------------------- [](#verfügbare-insert-tags) Das Bundle stellt die zwei Insert-Tags bereit: ``` {{comp::contrast}} {{comp::size::link}} ``` Wobei ***link*** beim Insert-Tag comp::size::link durch einen ***alias*** oder eine ***Uri*** ersetzt werden kann. Wird kein ***link*** angegeben, so generiert das Tag einen Link auf die Root-Page. Die Insert-Tags können beliebig platziert werden, wobei das Aussehen von Ihrem Theme oder Styling abhängig ist. Dabei steht dieses Symbol für ***hohen Kontrast umschalten***: [![img.png](https://user-images.githubusercontent.com/13376233/224686641-3b85ab24-8e71-497a-b480-511e4d06f1b0.png)](https://user-images.githubusercontent.com/13376233/224686641-3b85ab24-8e71-497a-b480-511e4d06f1b0.png) und dieses für ***Schriftgröße ändern***: [![img_1.png](https://user-images.githubusercontent.com/13376233/224646586-0caf797b-51bd-4cc9-b95d-6e339487bc60.png)](https://user-images.githubusercontent.com/13376233/224646586-0caf797b-51bd-4cc9-b95d-6e339487bc60.png) Das sind aber nur zwei Beispiele. Die Darstellung ist von Deinem Theme und vom Styling abhängig. The SVG icons stammen aus: (Siehe dazu auch die beiliegende Lizenz unter [LICENSE\_MATERIAL\_DESIGN\_ICONS](LICENSE_MATERIAL_DESIGN_ICONS)). Verfügbare CSS-Klassen ---------------------- [](#verfügbare-css-klassen) Das Bundle stellt mehrere CSS Klassen für den hohen Kontrast Modus bereit: ``` # Auszug .hc-invert, .hc-invert-pictures img, .hc-invert-pictures svg { filter: invert(1); } .hc-greyscale, .hc-greyscale-pictures img, .hc-greyscale-pictures svg { filter: grayscale(1); } .hc-bg-black { background: black !important; color: white !important; } ``` Mit diesen Klassen kann gesteuert werden, wie sich die Website bei der Anwendung von hohem Kontrast verhält. Alle Klassen sind [hier](public/scss/theme-components.scss) zu finden. Konfiguration ------------- [](#konfiguration) Es gibt die die Möglichkeit, die Verwendung von ***hohem Kontrast***, ***automatischem hohem Kontrast*** und ***Schriftgröße*** in geringen Umfang zu konfigurieren. Das geschieht im Startpunkt der Website für den gesamten darunter liegenden Seitenbaum. Die Optionen ist unter ► ***Seiten*** ► ***Website-Startseite*** unter der Legende ► ***WCAG-Einstellungen (Web Content Accessibility Guidelines)*** zu finden. WCAG steht hier für die offiziellen [Richtlinien zur barrierefreihen Gestaltung von Websites](https://www.w3.org/Translations/WCAG20-de/). Der Unterschied zwischen ***hohem Kontrast*** und ***automatischem hohem Kontrast*** besteht darin, dass High Contrast manuell per Mausklick aktiviert werden kann, während Auto High Contrast den Kontrastmodus automatisch einschaltet, sobald in den Systemeinstellungen der Dark Mode aktiviert ist. [![wcag-einstellungen](https://private-user-images.githubusercontent.com/17127525/522941233-6d8b8443-e0ae-471b-bd74-07e48253ac95.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUzNTg2MzYsIm5iZiI6MTc3NTM1ODMzNiwicGF0aCI6Ii8xNzEyNzUyNS81MjI5NDEyMzMtNmQ4Yjg0NDMtZTBhZS00NzFiLWJkNzQtMDdlNDgyNTNhYzk1LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA1VDAzMDUzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNlY2JlMGNjNzlkZWQ4OWViZTY0NTAxOGMzOTBhMzQ0ODJiNGVkNzE4YzQzOWU0YTBiMDlkNTYxMmM0NTBjYTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0._BXWklDY0cYJYhCzgp4-3QulUS-bvR6J1GvYTLtCfbs)](https://private-user-images.githubusercontent.com/17127525/522941233-6d8b8443-e0ae-471b-bd74-07e48253ac95.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUzNTg2MzYsIm5iZiI6MTc3NTM1ODMzNiwicGF0aCI6Ii8xNzEyNzUyNS81MjI5NDEyMzMtNmQ4Yjg0NDMtZTBhZS00NzFiLWJkNzQtMDdlNDgyNTNhYzk1LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA1VDAzMDUzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNlY2JlMGNjNzlkZWQ4OWViZTY0NTAxOGMzOTBhMzQ0ODJiNGVkNzE4YzQzOWU0YTBiMDlkNTYxMmM0NTBjYTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0._BXWklDY0cYJYhCzgp4-3QulUS-bvR6J1GvYTLtCfbs) Hier können Sie Features (sprich Insert-Tags) einzeln de/aktivieren und die Zuordnung zwischen der ***Seite zur Erläuterung der Schriftgrößenänderung*** und dem Icon festlegen. DEV === [](#dev) run before commit ----------------- [](#run-before-commit) ``` vendor/bin/ecs check src tests ``` ### Health Score 58 — FairBetter than 98% of packages Maintenance84 Actively maintained with recent releases Popularity30 Limited adoption so far Community17 Small or concentrated contributor base Maturity84 Battle-tested with a long release history Bus Factor1 Top contributor holds 64.2% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~57 days Recently: every ~22 days Total 47 Last Release 133d ago Major Versions 0.1.2 → 1.0.02018-12-13 PHP version history (6 changes)0.1.0PHP >=7.1 0.1.2PHP ^5.6 || ^7.0 1.3.7PHP ^7.0 || ^8.0 1.3.9PHP ^7.1 || ^8.0 1.4.0PHP ^8.0 1.5.0PHP ^8.1 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/10244240?v=4)[Mathias Arzberger](/maintainers/MDevster)[@MDevster](https://github.com/MDevster) --- Top Contributors [![seibtph](https://avatars.githubusercontent.com/u/17127525?v=4)](https://github.com/seibtph "seibtph (77 commits)")[![MDevster](https://avatars.githubusercontent.com/u/10244240?v=4)](https://github.com/MDevster "MDevster (43 commits)") --- Tags templatecontaotheme ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/contao-themes-net-theme-components-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/contao-themes-net-theme-components-bundle/health.svg)](https://phpackages.com/packages/contao-themes-net-theme-components-bundle) ``` ### Alternatives [contao-themes-net/mate-theme-bundle mate theme bundle for Contao 5 1219.2k1](/packages/contao-themes-net-mate-theme-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)