The Bubble Grid is a custom block component that allows for circular images to be placed in a grid format. Users can select the background image, title, and optionally link the bubble.  The Bubble Grid can be used to display content such as all programs or centers of a department, or various resources of like information.

Example

• Each bubble can have its own image and will automatically crop and size to fit a 250pixel circle.
• Decide if you want 1, 2, 3, or 4 to display in a row before a new row is added. 
• If 4 bubbles were selected to display in a row, and 5 bubbles are added, the fifth bubble will be added to a new row and centered.
• On hover, if linked, the background image will lighten.
• Text is automatically styled and is in all caps. 

How to Create a Bubble Grid

Editors and Site builders are able to create bubble grids. It is an option in the Custom Block Library. Once a Bubble Grid has been created, it will be added to the custom block library. They can also be created within Layout on a basic page as an inline block; this will not be listed in the custom block library.

Custom Block Library

1. On the admin panel, navigate to Structure -> Block Layout -> Custom Block Library
2. Click the "Add custom block" button 
3. Select "Bubble Grid" from the list
4. Give your Bubble Grid a unique custom block name
5. Enter the number of bubbles you want to display in a row (Options: 1, 2, 3, or 4). On mobile, these will stack, one on top of the other. 
6. Add a Bubble caption and optionally, a link (external or internal)
7. Click to the "Background" tab to select an image for the background of the bubble
8. Click "Add Bubble" to add another bubble
9. Continue adding additional bubbles as needed. 
10. By default, the block is in draft and will not display to those viewing the site, only to authenticated (logged in) users. Once you are ready for the updates to publish, change the state to "Published". 
11. Click Save