Layout Builder Kit

Layout Builder Kit is a set of pre-made components you can use in your Layout Builder pages. It performed a useful function for some sites, however, it has been superseded by many other projects. Thus, I'm changing its status to no more development.

I'll keep updating LBK throughout the life of D11 but please consider selecting an alternative. I've put together the options we have (2024) in the four-part series of articles below.

Drupal Page Builders—Part 1: Paragraph-Based Solutions
https://www.thedroptimes.com/38267/drupal-page-builders-part-1-paragraph...
Drupal Page Builders—Part 2: Layout Builder-Based Solutions
https://www.thedroptimes.com/38466/drupal-page-builders-part-2-layout-bu...
Drupal Page Builders—Part 3: Other Alternative Solutions
https://www.thedroptimes.com/38635/drupal-page-builders-part-3-other-alt...
Drupal Page Builders—Part 4: Distributions
https://www.thedroptimes.com/38892/drupal-page-builders-part-4-distribut...

Some additional options that have come up are:
Noah's Creator
https://www.drupal.org/project/noahs
https://noahs-creator.com/

Blokkli
https://www.liip.ch/en/blog/blokkli-starterkit-released

-------------------------------------------------

The 2.0.x branch uses Hook Event Dispatcher 3.x, which means you will need to enable the Core Event Dispatcher (/admin/modules) module for LBK to work.

The 3.0.x branch uses Hook Event Dispatcher 4.x. Thus, it will be compatible with Drupal 10.1+.

Current components are:

• Book Navigation
• Image
• Icon Text (icon to the left/up or right/down of text)
• Render—now renders media objects with a view mode
• Rich Text
• Tab
• Video

Please check the issue queue and the Known Issues page before reporting a bug.

Uploading Images

You'll almost certainly want one of these modules to upload images:
• IMCE
• Editor File Upload
• Insert
• CKEditor Upload Image

Test the Module

See the documentation to test the module at Simplytest.me.

Documentation

User and developer documentation is here.

Learn more about the Layout Builder Ecosystem and detail on the different ways components can store configuration settings in the 2019 BADCamp presentation Start Using the Emerging Layout Builder Ecosystem.

Component Features

Common Features

• Hide component title
• Add CSS classes for further customization (via files or Asset Injector)

Book Navigation Component

• Provide easy navigation of Drupal Books

Image Component

• Change the position of the title
• Select an Image Style
• Change the alignment of the image (left, center, right)
• Add a rich text overlay
• Change location of overlay text
• Add extra CSS classes

Icon Component

• Change the position of the icon (on left or right)
• Add a URL behind the icon
• Add rich text to the left or right of the icon
• Add extra CSS classes

Render Component

Select a single node or media object and view mode to render.

Rich Text Component

Enter text and select the Text format (Basic HTML, Restricted HTML, Full HTML, or others you add).

Tab Component

• Add an unlimited number of tabs
• Add rich text directly in the tab
• Render a block in the tab
• Add extra CSS classes

Video Component

• Render YouTube and Vimeo videos
• Provide URL in a text field
• Specify a field in an entity with the URL
• Add extra CSS classes

Other Modules

Check out our other modules and projects:

• Automated Testing Kit, kickstart your testing program with useful tests and utility functions in Cypress and Playwright
• Campaign Kit, a flexible donation system made entirely in Drupal that supports chained and peer-to-peer campaigns
• Payment Stripe, a Payment module plugin that processes Stripe payments
• and the Drupal Quality Initiative, a standards system to help teams and module builders improve the code they ship.