Skip to content
Example for the UI Patterns module for Drupal.
Branch: 8.x
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Drupal UI Patterns Example

Have you ever written the same code twice while theming a Drupal website? Learn how to build a site with easily reusable components using the UI Patterns module. Such component-based software development results in faster development cycles because you build each component only once.

Read the full article about Drupal UI Patterns: Component Driven Development in Drupal.

See the code in action

To see the code in action, do the following:

  • This repo contains a theme declaration. Download the code for this repository and rename the directory to oldie.
  • Place the oldie directory in to a Drupal installation such that is located at themes/custom/oldie/
  • Enable the oldie theme and set it as default.
  • Install the ui_patterns module with the UI Patterns Library module.
  • Login to your website as an administrator and visit the /patterns page.

You should now see a pattern named Blockquote on the page with 2 variants.

UI Patterns + Twig Tweak

Thanks to the Twig Tweak module, it is possible to use UI Patterns from within Twig files. For example, we can render a blockquote from a Twig file as follows:

{{ pattern('blockquote', {
  'content': 'The gravest battle a man can fight is the one against himself.',
  'author': 'Jerry Radwick'
}, 'highlighted') }}

UI Patterns + Renderable Arrays

It is also possible to render UI Patterns with Drupal's Render API. All you need to do is prepare a renderable array as follows:

$elements['blockquote'] = [
  '#type' => 'pattern',
  '#id' => 'blockquote',
  '#variant' => 'highlighted',
  '#fields' => [
    'content' => 'The gravest battle a man can fight is the one against himself.',
    'author' => 'Jerry Radwick'

Next steps

You can’t perform that action at this time.