Example usage
Example of plugin declarations in the YML files.
Should I do a component or a style?
A question that can ask yourself when creating your design system.
Best practices
The currently identified best practices related to UI Styles
Advertising sustains the DA. Ads are hidden for members. Join today
Contributed module documentation
- A11Y Paragraphs Tabs
- AI
- AI Interpolator
- AI Migration
- API Authentication
- API module
- APITools
- Accelerated Mobile Pages (AMP)
- Access NASA API
- Access Policy
- Accessibility Scanner
- Acquia Migrate: Accelerate
- Actions UI
- Active Tags
- Activity Tracker module
- ActivityPub
- Add To Calendar Date Augmenter
- AddToAny Share Buttons
- Address Decoupled
- Address for Luxembourg
- Address for Rep. of Moldova
- Admin Menu Swap
- Adobe Launch
- Advanced CSS/JS Aggregation
- Advanced Email Validation
- Advanced File Destination - Ho to use
- Advanced Insert View
- Advanced Varnish
- Advanced Views RSS Feed
- Aggregator
- Akamai
- Album Photos
- Alexa
- Allow a content type only once (Only One)
- Altcha
- Anu LMS
- Apigee API Catalog
- Apigee Developer Portal Kickstart
- Apigee Edge
- Apigee Monetization
- Apple News
- Astrology
- Atoms
- AudioField
- Audit files
- Augmentor User Guide
- Authorization
- Auto Link
- Auto Node Translate
- Auto Taxonomy Term Translate
- AutoFloat
- Automatic Updates
- Avatar Kit
- Azure Drupal Sync
- BAT Guide
- BEE hotel
- Backstop Generator
- Backup and Migrate
- Bamboo Twig
- Ban
- Barcodes
- Behat UI
- Better Exposed Filters
- Bibliography & Citation
- BigCommerce
- Block Class
- Block Form Alter
- Block List Override
- Block Style Plugins
- Blog
- Book
- Boost
- Bootstrap Layouts
- Bootstrap Paragraphs
- Bootstrap Quick Tabs
- Bootstrap Theme Toggler Block
- Bothive Chatbot
- Botman
- Boxout
- Braintree Cashier
- Breakgen
- Brightcove Video Connect
- Bundle override
- Burndown
- Business Rules
- Bynder
- CAS
- CDEK API
- CKEditor 4 LTS
- CKEditor 5 PRE
- CKEditor 5 Premium Features
- CKEditor
- CKEditor Accessibility Auditor
- CKEditor CodeMirror
- CKEditor Entity Link
- CKEditor Font Size and Family
- CKEditor Google Search
- CKEditor Libraries Group
- CKEditor: N1ED plugin
- CMRF Core Documentation
- CRM - Contact Relationship Management
- CSV Importer
- CSV to Config
- Cached moderation state
- Calendar View
- Canvas LTI
- Captcha Keypad
- Changed Fields API (8.x-3.x)
- Changed Fields API
- Chaos Tool Suite (ctools)
- Chart Suite Guide
- Charts
- Chatbot API
- Chatbot Framework
- Claro
- Cloud
- Cloudflare Stream
- Cloudinary
- Coder
- Collapsiblock
- Color
- Color Field
- Comment Notify
- Comment mover
- Commerce
- Commerce API
- Commerce Affirm Credit Payment Gateway
- Commerce Approve
- Commerce Authorize.Net
- Commerce Braintree
- Commerce Cart API
- Commerce Cart Flyout
- Commerce DIBS integration
- Commerce Easy
- Commerce Funds
- Commerce Google Tag Manager
- Commerce Ingenico
- Commerce Inventory
- Commerce Invoice
- Commerce Migrate
- Commerce NoFraud
- Commerce Order Document
- Commerce PVT
- Commerce Pagseguro Transparente
- Commerce PayPal
- Commerce Payment Extra
- Commerce Point of Sale (POS)
- Commerce PostFinance Checkout
- Commerce Postfinance
- Commerce Product Options
- Commerce Recurring Metered
- Commerce Rental
- Commerce Reporting
- Commerce Square Connect
- Commerce Time Slots
- Commerce Tpay
- Commerce TrustedShops
- Commerce Variation Add-on
- Commerce Webform Order
- Commerce iATS
- Commerce iDEAL Payment Gateway
- Component Schema
- Components
- Computed Field
- Computed Field Plugin
- Conditional Fields
- Config Override Inspector
- Config Pages
- Config Single Export
- Config Token
- Config partial export
- Configuration Kits
- Configuration Split
- Contact
- Content Alerts
- Content Feedback
- Content Import
- Content Packager
- Content Planner
- Content Synchronization
- Content-Security-Policy
- ContentAccess
- Create fields programmatically
- Crossword
- CrowdSec
- CsvtoTable
- Cura Childcare Suite
- Cura Childcare Suite
- Currency
- Custom 4XX Pages
- Custom API
- Custom Field
- Custom Status Report
- Custom Tokens
- Custom Tokens and its snippets
- Custom breadcrumbs
- Customerror
- D8 Rules Essentials
- DKAN
- DKAN
- Dashboard
- Date Augmenter API
- Decoupled Blocks: Vue.js
- Decoupled Toolbox
- Decoupled Toolbox
- Decoupled quiz
- Default Content for D8
- Delete Entity Translations
- Dempo
- Deploy
- Deploying Meilisearch to production
- Devel
- Devel Generate Commerce
- Developer Suite
- Developer portal
- Digital Signage Framework
- Disclosure Menu
- Disclosure Menu
- Display Suite Chained Fields
- Dominican Catalogus Module
- DraggableViews
- Drupal Chatbot
- Drupal Commerce Merchant Warrior
- Drupal Contribution
- Drupal Diversity & Inclusion
- Drupal Js Path
- Drupal LMS
- Drupal OAuth & OpenID Connect Login - OAuth2 Client SSO Login
- Drupal OAuth OIDC Login
- Drupal Remote Dashboard
- Drupal Slider
- Drupal Website Security – Complete Protection for Your Site
- Drupal WhatsApp
- Drupal YouTuber
- Drupal driver for SQL Server and SQL Azure
- DubBot
- ECA: Event - Condition - Action
- ECC
- EU Cookie Compliance
- EVA
- Easy Breadcrumb
- Easy News
- Editor Button Link
- Ek Jitsi
- Elasticsearch Connector
- Email Verification / SMS Verification / OTP Verification
- Encrypt
- Entitree Administration Guide
- Entity Access Password
- Entity Browser - Table Layout
- Entity Browser
- Entity Pager
- Entity Parser
- Entity Prepopulate
- Entity Print
- Entity Reference Facet Link
- Entity Reference Override
- Entity Reference Views
- Entity Reference Views Select
- Entity Registration
- Entity Search Autoindex
- Entity Share
- Entity Share WebSub
- Entity Update
- Entity Usage
- Entity Usage Addons
- Entity browser
- Environment indicator
- Epsilon Harmony Connector
- Ethereum
- Evaluate Webform
- Event Platform
- Events Logger
- Excel Importer
- Exerciser Usage
- Expire reset password link
- Extensions API
- External Authentication
- External Entities
- External Entities Database storage
- Extra Block Types (EBT)
- Extra Paragraph Types (EPT)
- Facebook Instant Articles
- Facet Bot Blocker
- Facets
- Facets Date Range Picker
- Factory Lollipop
- Feature Toggle
- Features
- Feeds
- Feeds Migrate
- Feeds Paragraphs
- Feeds extensible parsers
- Field Encrypt
- Field Gallery
- Field Group
- Field Inheritance
- Field description tooltip
- Field validation
- File Extractor
- Filebrowser
- FillPDF
- Firebase Authentication Guide
- Fivestar
- Flag
- Flag Lists
- Flashpoint Education
- Flexible Views
- Flickr Integration Suite
- Flow2
- Fluent
- Flysystem
- Focal Point
- Focal Point
- FolderShare Guide
- Font Awesome Icons
- Footnotes
- Form mode manager
- FormAlter as Plugin
- FormAssembly
- Formatter Suite Guide
- Formdazzle!
- Forms steps
- FortyTwo
- Forum module
- Forward
- Freelinking
- Friendship
- Frontend Editing
- Frontify Assets
- FullCalendar Block
- Funding
- GA Push
- GIT Info Report
- GLightbox
- Gatsby Integration
- General Data Protection Regulation
- Geocluster D8/D9 Set-up
- Geofield
- Geolocation Field
- Get Linkedin Posts
- Ghost Inspector Integrator
- Ghost Inspector Integrator
- Gin Toolbar Custom Menu
- Ginger Robot Gardens
- Ginger Robot Suite
- Give
- GlobalDoc’s LangXpert Connect for Drupal
- Googalytics
- Google API PHP Client
- Google Analytics
- Google Analytics Counter
- Google Analytics Search API Autocomplete
- Google Authentication for Users
- Google Bard
- Google Calendar Import
- Google Programmable Search Engine
- Gophish Integration
- GovUK Notify
- GrapesJs Editor - Page builder
- GraphQL
- Grid Widget
- Group
- Group Content Moderation
- Group Flex
- Group Invite
- Group Media
- Group Subscription
- Group by Field Widget
- Grouper Usage
- Gutenberg
- Gutenberg Content Embed
- Gutenberg Starter
- Gutenberg Starter
- Gutenberg USWDS
- Guzzle REST Generator
- HAL
- HAX
- HTML Mail
- HTML Title
- HTTP Client Manager
- Hanging Conjunctions Filter
- HelloSign
- Hidden Tab
- History
- Honeypot
- Hospital Price Transparency
- Hotkeys for Save
- How to Configure Drupal Sharepoint Integration
- How to Download & Install SharePoint Integration Module
- How to test a module locally using DDEV (Webform Booking example)
- Human Presence Form Protection
- Hux
- IMCE File Manager
- IPMA Weather
- Iconify Icons
- If Then Else
- Iframe Media Embed Video
- Image Base64 Formatter
- Image Optimize
- Image Replace
- Imageshop
- Immoweb API Client
- In Other Words
- Inline Formatter Field
- Insert
- Instagram Block
- Integrating Frontify with Drupal: A Comprehensive Guide
- Intercept
- Islandora
- JSON Field Utils
- JSON:API Search API
- Janrain Connect
- Juicebox HTML5 Responsive Image Galleries
- Juicer - Social Media Feed Aggregator
- Key
- Keycloak OpenID Connect
- Klaro Consent Management
- Knowledge
- Konami Code
- LDAP Integration
- LDAP Integration with Active Directory and OpenLDAP - NTLM & Kerberos Login
- Language Negotiation Url Matrix
- Layout BG
- Layout Builder Additions
- Layout Builder Block Sanitizer
- Layout Builder Plus
- Layout Builder Restrictions
- Layout Builder Settings Report
- Layout Builder Styles
- Layout Builder Tabs Section
- Layout Components
- Layout Options
- Layout Paragraphs
- Lazy-load
- Leaflet
- Leaflet More Markers
- Libraries API
- LiftIgniter
- Lightgallery
- Lightning Accessibility
- Lightweight Directory Access Protocol (LDAP)
- Link attributes
- Link icon
- Linkback
- Linkit
- Lndr
- LocalGov Drupal
- LocalGov Drupal
- Localist Drupal
- Localization server
- Localized Configuration
- Loco Translate
- Loqate
- Ludwig
- Lunr search
- Maestro
- Maestro Activepieces Integration
- Mailchimp
- Maintenance
- Manage display
- Managing User Account Expiration with User Expire Module
- Map
- Map
- Mapbox Field
- Markdown
- Markdown Easy
- Markdown Exporter
- Marketing Cloud
- Mask Field
- Matomo Analytics
- Maxlength
- Media Contextual Crop
- Media Gallery
- Media Library Form Element
- Media PDF Thumbnail
- Media Video Micromodal
- Media: Acquia DAM
- Membership
- Menu Manipulator
- Menu Migration (Import & Export)
- Message
- Message Integration
- Message Thread
- Metatag
- Metatag Google Scholar
- Micro Site
- Microsoft Entra ID SSO Login
- Microsoft Entra sync
- Migrate Magician
- Migrate QA
- Migrate Source CSV
- Migrate Source GraphQL
- Migrate Source JCR
- Migration Tools
- Mime Mail
- Mix
- Modal
- Modifiers
- Moodle REST
- Mother May I
- Multilanguage Form Display
- Multiple Registration
- Multistep Form Framework
- Multiversion
- NASA Astronomy Picture of the Day
- NFT
- Name Field
- Nbox
- New York State Design System Libraries
- Node Type count
- Notify
- OAuth 1.0
- OAuth Server - API Documentation
- OAuth Server - SSO Setup Guides
- OAuth2 & OpenID Connect
- OAuth2 Client
- OEmbed Lazyload
- OH
- Office 365 Connector
- One Time Password SMS
- Open ReadSpeaker
- OpenChurch
- OpenEDU
- OpenID Connect
- OpenID Connect Microsoft Azure Active Directory client
- OpenLayersD8
- OpenQuestions
- Openlayers
- Oracle Driver
- Oracle Eloqua API Redux
- OwnTracks
- PCO - Planning Center Online API
- PHP filter
- PNX Gallery
- PNX Media
- Packages
- Packagist
- Pagedesigner
- Panopoly 2 for Drupal 8/9
- Paragraph Group
- Paragraphs
- Paragraphs Bundles
- Paragraphs Bundles Import
- Paragraphs Collection
- Paragraphs Gridstack
- Paragraphs Role Visibility
- Parameter Message
- Paranoia
- Pathauto
- Patternkit
- Performance Budget
- Permalink Block
- Permanent Entities
- Permissions by Term
- Persistent Login
- PhotoSwipe
- Place Blocks
- Plotly.js Graphing
- Plupload
- Poll
- Popup field group
- Postoffice
- Potion
- Preprocessor Files
- Preprocessor Plugins
- Preview graph QL
- Private DNS
- Private Message
- Progressive Web App (PWA)
- Project Browser
- Protected Content
- Pusher API
- Quadstat
- Quick Edit
- Quick Node Clone
- Quickchat
- Quicklink
- RDF
- RELAXed Web Services
- RNG
- Rabbit MQ
- Radioactivity
- Range Slider
- Reactify theme & module
- Read time
- Recipes Cookbook
- Recombee
- Recurring Dates Field
- Recurring Events
- RegEx Field Validation
- Registration Confirm Email Address
- Registration codes
- Registration role
- Release Version
- Remote Stream Wrapper
- Responsive Background Image
- Responsive Class Field
- Responsive Image Formatter Tools (RIFT)
- Responsive Image Preload
- Responsive Tables Filter
- Responsive menu
- Rocket.Chat Integration Module Guide
- Role paywall
- Rules
- Rules API POST
- SAML Authentication
- SAML IDP 2.0 Single Sign On (SSO) - SAML Identity Provider
- SAML SP Single Sign On (SSO) - SAML Service Provider - by Miniorange
- SMS Framework
- SMS System
- SVG Image Field
- Salesforce ECA Integration
- Salesforce MFW
- Salesforce Suite
- Scheduled Transitions
- Scheduled Updates
- Scheduler
- Schema.org Blueprints
- Schema.org Metatag
- Search 404
- Search API
- Search API AI
- Search API Autocomplete
- Search API Decoupled
- Search API Exclude Entity
- Search API Federated Solr
- Search API RediSearch
- Search API Sajari
- Search API Solr
- Search API Xunsearch
- Search API opensolr
- Search and Replace Scanner
- SearchStax Search API
- Select 2
- Semantic Views
- Sender
- Service Worker Registration
- Setting up the Release Version module
- Shared Field Display Settings
- Sharerich
- Sherpa Webform
- ShrinkTheWeb
- Simple Content Notifications
- Simple Decoupled Preview
- Simple FB Connect
- Simple Instagram Feed
- Simple Node Importer
- Simple Page Manager
- Simple Popup Blocks
- Simple XML sitemap
- Simple multi step form
- Simplenews
- Single Content Sync
- Site Module
- Siteimprove
- Sitemap
- Sites
- Skilling
- Skins
- Skosmos Feeds
- Smart Content Overview
- Smart Date
- Smart Title
- Smart Trim
- Snippet manager
- Social API
- Social Auth Vipps
- Social Media Platforms
- Social Migration
- Social Post Facebook
- Socialfeed
- Socialfeed
- Songkick
- Sound Management
- Spectra Analytics
- Srijan theme
- Static Node Generator - How to use and Use cases
- Statistical Spam Filter
- Statistics
- Step by step guides to configure various 2FA / MFA / TFA methods
- Stop Administrator Login
- String
- Structure Sync
- Style Selector
- Style Switcher
- Styled Google Map
- Subgroup
- Summit Meeting List
- Superfish Drop-down Menus
- Swagger UI Field Formatter
- Swiper Formatter
- Switches
- Symfony Mailer
- Syncer
- Synonyms
- System Monitor
- TMGMT Capita
- TMGMT Plunet
- TacJS
- Tagify
- Targets
- Taxonomy Bulk Actions (TBA)
- Tealium iQ Tag Management
- Telephone International Widget
- Template Entities
- Template Whisperer
- TextRazor - Automatic text classification
- The Better Mega Menu
- Time's Up
- Token
- Token
- Token Filter
- Tom Select
- Tombstones
- Tone
- Toolshed
- Tooltip
- Tour
- Transaction
- Transform API
- Translation Management Tool
- Trending Topics
- Tweet Feed
- Twig Components
- Twig Render This
- Twig Tools
- Twig tweak
- Twitter API Block
- Twitter Tweets
- Typed Data API Enhancements
- UI Patterns
- UI Patterns Pattern Lab
- UI Styles
- URL Embed
- Ubercart
- Uikit Slideshow
- Ultimate table Field
- UniOne
- Unisender newsletter
- UpTime Widget
- Upload File History
- User CSV Import
- User Guide for Field Encrypted Searchable - FES
- User History
- User Session Management and Monitoring
- Using CAT tools for Drupal
- Varbase Editor
- Varnish purger
- Vertex AI Search
- Vertex AI Search Promoted Results
- Video
- Video Embed Field
- Video Toolbox
- View Transitions
- Views Add Button
- Views Bootstrap for Bootstrap 3
- Views Bootstrap for Bootstrap 5
- Views Bootstrap for Bootstrap4
- Views Bulk Operations (VBO)
- Views Display Union
- Views Field View
- Views Local Tasks
- Views Mobile
- Views PDF
- Views RSS: Media (MRSS) Elements
- Views Reference Field
- Views Regex Functions
- Views Remote Data
- Views Send
- Views Slideshow
- Views TimelineJS
- Views filter content type
- Vipps Recurring Payments: Installation
- Visitors
- Visual Layout Suite
- Visual Website Optimizer
- VisualN
- Visualization Charts
- Vite
- Voting API Reaction
- Wallee
- Warden
- Wayfinding
- Web Page Archive
- Web Service Data
- Webform
- Webform Attachment Gated Download
- Webform Eloqua
- Webform GoogleSheets
- Webform HotDocs
- Webform Trello
- Webform Workflows Element
- Website Feedback
- When and why to use Link Param Propagator
- WissKI
- WordPress Migrate
- Wordcount
- Workbench Menu Access
- Workflow
- Workout Usage
- Workout Usage with Drush
- Workspace
- XML Sitemap
- XML-RPC
- Xero Sync
- YAML Content
- YAML To PHP
- Youtube Gallery
- Zoom API
- agGrid
- ePayco integration
- htmLawed HTML filter/purifier
- memoQ translation
- miniOrange User Provisioning
- reCaptcha v3
- signageOS
- simplytest.me
UI Styles
Documentation had been migrated to Gitlab page.
Design systems generally provide helpers and utilities CSS classes to apply on any element to handle generic CSS effects like background color, text effects, spacing, etc.
UI Styles allows:
- developers to define styles (simple lists of concurrent CSS classes) from modules and themes in
my_theme.ui_styles.ymlfiles - site builders to use those styles depending on the modules enabled (sub modules of UI Styles or modules of its ecosystem).
The module generates a styles library page to be used as documentation for content editors or as a showcase for business and clients.
Guide maintainers
