Statistics Grid Custom Block

Statistics Grid is a custom block component that allows statistical content to be displayed in a grid format with a background. Users can select the background image of the grid, the value of the statistic and a short description of the value.  

The image below is an example of a statistic grid with four statistics shown with 3 across. 

statistics grid screenshot
Statistics Grid example screenshot

Things to note:

  • The entire grid can have a background image or color
  • Decide if you want 1, 2, or 3 o display in a row before a new row is added. 
  • If 3 statistics were selected to display in a row, and 4 statistics are added, the fourth statistic will be added to a new row and centered.
  • A semi-transparent box will be shown for each statistic
  • The top value does not have to be a numerical keys
  • Text is automatically styled and is in all caps. 

To create a Statistics Grid

Editors and Site builders are able to create statistic grids. It is an option in the Custom Block Library. They can also be created using the Panelizer. Once a Statistics Grid has been created, it will be added to the custom block library. 

Method 1 - Custom Block Library

    1. From the admin toolbar panel, navigate to Structure ->Block Layout -> Custom Block Library
    2. Click on the +Add custom block button.
    3. From the list of available blocks, click on Statistics Grid.
    4. Give the Statistics Grid a unique custom block description
    5. Enter the number of statistics to display in per row (Options: 1, 2, or 3). On mobile, these will stack, one on top of the other. 
    6. Click over to the "Background" tab, select either a background image from your library or choose a background color from the available palette colors.
    7. Click back to the "Stats" tab, add the number and label for the statistic.
    8. Add as many needed statistics by clicking the button "Add Statistic" 
    9. 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". 
    10. Click Save to finish.

    Add Statistics Grid to a Basic Page

    1. Open a Basic Page previously created by clicking on the content's title that you want to display the basic block. 
    2. In the view where Panelizer is displayed, click on "Manage Content"
    3. Select "Custom"
    4. Find the block description of the statistic grid created and click on the block. 
    5. Optionally display the title when placed on the page. You can also update the text of the displayed title.
    6. Select the region of the page to display the block (by default, it will be added to "Content")
    7. Click Add

    The statistic grid has now been added to the selected region of your page. This block can be placed on multiple pages. Follow the instructions above for each page. Additionally, site builders can use block placement to add a statistic grid to multiple nodes at once.