Element Pack

The Element Pack module offers a collection of custom elements designed to enhance the user experience, improve accessibility, and enable more sophisticated designs in Drupal. By providing a library of flexible and modern components, this module helps developers and site builders create interfaces that are both visually appealing and machine-readable.

Table of contents

• Table of contents
• Summary
• Requirements
• Installation
  • 1. Download the module:
  • 2. Enable the module:
  • 3. Clear the cache:
• Configuration
• Maintainers

Summary

Key features of the module include a reimagined approach to Drupal’s core button element. Unlike the default implementation, which uses </code> tags for buttons, the Element Pack module leverages the semantic and flexible <code> tag. This enables developers to include richer content, such as icons or HTML, directly within buttons, aligning with modern web design practices.

The module prioritizes:

• User Experience (UX): Provides customizable elements to create seamless interactions.
• Accessibility: Ensures components are machine-readable and follow best practices for inclusive design.
• Design Flexibility: Supports advanced styling options and dynamic content for a polished appearance.

With Element Pack, your Drupal forms and layouts can take a significant step forward, offering both functional and aesthetic improvements across a wide range of use cases. Whether you’re building intuitive forms, dynamic layouts, or simply want more control over UI components, Element Pack has the tools you need to succeed.

Requirements

This module requires the following:

• Drupal Core: ^10 or ^11

No additional dependencies are required.

Installation

Install this module as you would normally install a contributed Drupal module. Follow these steps:

1. Download the module:

composer require drupal/element_pack

2. Enable the module:

drush en element_pack

3. Clear the cache:

drush cr

For more detailed information, refer to the Installing Drupal Modules documentation.

Configuration

1. After enabling the module, you can use the custom_button form element in your Drupal forms.
2. Example usage in a form:

$form['my_button'] = [
  '#type' => 'element_pack_button',
  '#label' => Markup::create('Click Me'),
  '#attributes' => [
    'class' => ['my-button'],
    'onclick' => 'alert("Button clicked!");',
    'type' => 'button', // Or 'submit'.
  ],
];

Maintainers

• umekikazuya

If you would like to contribute to the development of this module, please feel free to submit issues and patches on the Element Pack module’s issue queue.