Drupal 8 Blocks Reference

When working with Layout Builder in Drupal 8, there are many custom blocks available. This page has a sample of each block type, along with some helpful notes.

New custom blocks are being developed all the time. The styles on existing blocks are subject to change as theme updates are released. This page will reflect the latest changes.

If you have an idea for a new type of block, don't hesitate to get in touch!

If you see a block here that you do not see available on your site, contact your site administrator or Web Tech and ask for that block type to be enabled.

 

Accordion

The following is an accordion block. Ideal for FAQs, or content that should be hidden unless a user may have a specific interest in the hidden content.

Accessibility note: the headings can be adjusted in the block, but all headings in the accordion should be at the same level for best user experience.

This is the content related to the first question.

This is the content related to the second question.

Here's content related to a third question.

Announcement

This is an announcement. The icon can be changed by using the text for any Material Icon.

A person standing on a craggy peak viewing a sunset

Banner

Banners will work well when used with full page width layouts. You can select different overlay colors and also set the minimum height of the block. This one is set to 50% of the window's height.

 

Basic Block

Basic blocks are handy when all you need to do is put in some vanilla content. There are no customization options for basic blocks.

 

Beyond Basics Block

Beyond basics blocks have a number of options for customizing the headings, font, and background colors. There is also a custom class field for advanced styling options.

This block has a dark blue background, a sans-serif H2 heading, and large font.

There are some spacing and alignment classes that can be added to the "Custom classes" field of a beyond basic block as well.

Margin Spacing

Margin classes add space around the outside of the block.

Class: standard-margin

Adds 12px of margin all around the outside of the block. You can also specifiy standard margin on certain sides:

  • standard-margin--right
  • standard-margin--left
  • standard-margin--top
  • standard-margin--bottom

Class: double-margin

Adds 24px of space all around the outside of the block. You can also specifiy double margin on certain sides:

  • double-margin--right
  • double-margin--left
  • double-margin--top
  • double-margin--bottom

Class: no-margin

Removes the margin space around the block. You can also specifiy no margin on certain sides:

  • no-margin--right
  • no-margin--left
  • no-margin--top
  • no-margin--bottom

Block Padding

Padding classes add more space within the block, around the content.

Class: standard-padding

This block has 12px of padding. You can also specifiy standard padding on certain sides:

  • standard-padding--right
  • standard-padding--left
  • standard-padding--top
  • standard-padding--bottom

Class: double-padding

This block has 24px of padding. You can also specifiy double padding on certain sides:

  • double-padding--right
  • double-padding--left
  • double-padding--top
  • double-padding--bottom

Class: no-padding

This block has its padding removed. You can also remove padding on different sides of the block:

  • no-padding--top
  • no-padding--bottom
  • no-padding--right
  • no-padding--left

Text Alignment

Text within a block can be aligned in certain directions.

Class: text-align-left

This text is aligned left. The image is also aligned left, and the button link is aligned left.

hands on a book

Link

Class: text-align-center

This text is aligned center. The image is also aligned center, and the button link is aligned center.

hands on a book

Link

Class: text-align-right

This text is aligned right. The image is also aligned right, and the button link is aligned right.

hands on a book

Link

Button

 

Button Button Button

The "Button" block actually creates links that are styled as buttons. There are a number of custom classes that can be added to these blocks to change the size, color, and shape of the link. The bolded text above each button is the class that can be added to the "Custom classes" field in Drupal.

Additionally, Google analytics tracking events can be added to buttons via Layout Builder.

Color

Sample

dark-blue

Sample

green

Sample

dark-green

Sample

white

Sample

Size

Sample

small

Sample

medium

Sample

large

Sample

Outline/Square

outline

Sample

square

Sample

Cards

Larger clickable areas--can contain images, brief description, and related terms. Cards do a good job highlighting staff profiles, upcoming events or stories.

Bellingham bay with hills on left

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Bellingham Bay with hills on left
Term 1 Term 2

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Information

Highlighted Term

This card has the "information" class added

Split Style Info

Highlighted Term

This card has these custom classes:

"split-style information"

Simple

Highlighted

"simple" custom class

Donut Chart

These charts are donuts by default, which are easier to read. However, you can transform your donut into a pie by adding "pie" to the custom classes field.

You can also change the color of your chart by adding either "light-blue" or "green" to the custom classes field.

Blue Chart

Pie chart of Blue Chart
  • 44% Thing 1
  • 12% Thing 2
  • 15% Thing 3
  • 6% Thing 4
  • 3% Thing 5
  • 2% Thing 6
  • 2% Thing 7
  • 16% Thing 8
Pie chart of Pie chart
  • 44% Another thing 1
  • 12% Another thing 2
  • 15% Another thing 3
  • 6% Another thing 4
  • 3% Another thing 5
  • 2% Another thing 6
  • 2% Another thing 7
  • 16% Another thing 8
 

Headline

Headlines aren't really intended for use in Layout Builder. They're intended to be used in the splash area, and have to be configured via a site-wide configuration.

However, they still appear in the list, so this is what they look like.

There are several styles of headlines available.

Call to Action

Image

 

An image will stretch to fit it's containing section.

Note: You do not have to use an image block to get an image on a page. You can also embed images in basic and beyond basics blocks!

a closeup of a keyboard

Image Button

 

Image buttons work well alone or in groups. They work really well when placed in a Flex Container layout, as they'll space out evenly.

If you don't want the extra styles and animations on your buttons, add "image-button--simple" to the custom class field.

 
many hands reaching out to books on a table

Image with Description

This block works really well when showcasing a collection of different items. It has options for changing the block color, as well as for flipping the block so that the picture appears on the opposite side.

Quicksearch Form

Quicksearch can help users filter a list of items by searching for a term. This block requires certain classes to work, and can be configured through Drupal views. Please contact Webtech for assistance with setting up quicksearch.

Search Results

Quote

 

This is a simple quote block.

Name of person being quoted
Something about that person

This is a quote box with the "pullquote--editorial" class added to the custom classes field.

Name of person being quoted
Something about that person
 
A woman

Testimonial

This is a basic testimonial

Name of person
Something about them
A woman

A bigger testimonial

This testimonial has the "testimonial--full-page" class added to it.

By the way, you don't have to have a testimonial to use these blocks. They can also be used to showcase special items on a page!

Name of person
Something about them

White Space

 

The white space block doesn't display anything, it just helps with adding vertical white space to desktop layouts. These blocks collapse on smaller screen sizes.

You have to add a title, but you should uncheck the "Display title" option on these blocks.