Home »
Block Examples
This page is meant to be a guide of all the custom Gutenberg blocks built for your site. These can be used on any page you make, as well as program pages and news posts. In addition to this paragraph, below are some other common blocks. Not pictured: images, spacers (adds space between two elements and is adjustable). Each block is referred to here as it is named in the block picker.
Separator:
Headings:
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lists (unordered and ordered)
- Unordered List Item 1
- Sub-menu level 2
- Sub-menu level 3
- Sub-menu level 2
- Unordered List Item 2
- Unordered List Item 3
- Ordered List Item 1
- Ordered List Item 2
- Ordered List Item 3
Table | |||
Default styling (outlines) or stripe styling (alternating row colors | |||
Can insert rows and columns using the inline toolbar that will pop up |
Buttons
Buttons, shown below, can be aligned vertically and horizontally, have multiple buttons in a row, and have the option of hyperlinking.
Media and Text

Media and text has many settings to control how the image and text behave, the widths of each, alignments of each in relation one another and how they size down on smaller screens.
Below are blocks that were custom built by Surface 51 for your site and not part of the default Gutenberg block set.
Quote
You can change things about this block in the settings in the right sidebar under the Color and Typography sections, such as text size, text color, background color and text alignment. Adjusting dimensions is not recommended.
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.
Accordion Deck
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.
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.
Color Bars
There are four options, depicted below, and each is selectable using a dropdown in the right sidebar.
Prefooter CTAs
Two Column CTA
Programs (by division)
Programs
Click to learn more.































Programs Grid
This block shows a grid of programs with an option to filter by division or show all programs (nothing checked or all checked). It has been excluded from this page because of its length but can be seen in use on this page.
Audience Select
Featured News or Event
Our Team – Accordion
Contact Our Team


Our Team – Cards (one)


Jennifer Bollinger
Instructor, Health Information TechnologyHealth Professions Division
Richland Main Campus, W134
(217) 875-7200, Ext. 6405
Our Team – Cards (two)


Nicholas Cunningham
Workforce Equity Initiative Program NavigatorExternal Relations
Richland Main Campus, W109D
(217) 875-7200, Ext. 6613


Marvelon Dampeer
EnRich Essential Skills FacilitatorExternal Relations
Center for Sustainability and Innovation (CSI), J220
(217) 875-7200, Ext. 6401
Our Team – Cards (several)


Dennis Arnold
Class Coordinator, MCLETCLaw Enforcement
Macon County Law Enforcement Training Center (MCLETC), 1095 Rotary Way, Decatur, IL 62521
(217) 875-7200


Nicole DelMastro-Jeffery
Executive Director, Diversity, Equity, Inclusion & BelongingPresident’s Office
Richland Main Campus, N186A
(217) 875-7200, Ext. 6273


Ashley Hall
Career & Completion CoachStudent Success
Richland Main Campus, N103
(217) 875-7211, Ext. 6280


Steve Austin
Professor, HistorySocial Science
Richland Main Campus, S226
(217) 875-7200, Ext. 6392


Nicholas Cunningham
Workforce Equity Initiative Program NavigatorExternal Relations
Richland Main Campus, W109D
(217) 875-7200, Ext. 6613


Donald Askins
Police OfficerPublic Safety
Richland Main Campus, E111
(217) 875-7200, Ext. 6554


Jarry Brown
DirectorTeaching & Learning Center
Richland Main Campus, W204
(217) 875-7200, Ext. 6229
Featured Programs Slider
Thin Callout

Text Card
Text-only Card
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.
Text-only Card #2
Bostrud 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.
Text-Only Card #3
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.
Image Text Card


Second Image Text Card
This card can be used in a column block to make a card grid.
Popup Cards


Vicki Carr
Chairwoman
Board of Trustees


Bishop Wayne Dunning
Trustee
Board of Trustees


Marcy Rood
Trustee
Board of Trustees


Dale Colee
Trustee
Board of Trustees
Image Quote


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.
Image CTA Grid
(adjustable amount of columns)
Contact Info
Get in Touch

