A design system is a library of reusable components and guidelines that people within a company can combine into interfaces and interactions.
For our purposes, we're using the term "design system" to describe how we're using these components to create a cohesiveness with our brand and a visual consistency across pages. Our site now uses Gutenberg blocks, which lends itself well to designing components that can be re-used, and establishing stylistic consistency. This page serves as a reference for all of the available blocks/components (which you can see in the secondary navigation menu), but above all, we want to provide explanations on how they can be used.
If you are interested in building pages on this site, this is for you!
Image Stack
The Image Stack block allows you to easily create layered image displays, perfect for displaying up to three photos.
Gallery Grid
The Gallery Grid block allows you to display four images with links in a grid layout. This is meant to direct the audience to additional information.
By the Numbers
A "By the Numbers" Block is a design element used on webpages to highlight numerical information or statistics in a visually engaging format. It typically consists of numbered sections or tiles, each showcasing a statistic or a numerical value along with a brief description.
This is good information
9:1Student-to-Faculty Ratio
That's one faculty member for every nine students.
89%Percentage of recent graduates who participated in at least one internship, service-learning course, education abroad or undergraduate research opportunity
$0The amount every enrolled student pays for tuition, housing, food, fees, and supplies
Starting Fall 2027, Berea College will guarantee 100% of tuition, housing, food, fees, and supplies are covered without loans for all students.
Button
A Button Block is a user interface element in web design that typically appears as a clickable button with text or an icon. Its primary function is to prompt an action from the user when clicked, such as redirecting to another webpage, submitting a form, initiating a download, or triggering some other predefined function.
From the Source
"From the Source" allows you to provide the audience with previews of brief videos, typically featuring an individual highlighting a specific topic or answering one related question.
Accordion
An accordion block is a web design element that organizes content into collapsible sections, allowing users to expand or collapse specific information by clicking on headers or titles. When implemented on a webpage, the accordion block conserves space by hiding content until the user chooses to view it. It's commonly used for FAQ sections, product descriptions, lengthy content, or any instance where you want to display categorized information that users can selectively access for more details.
Custom Quote
A Custom Quote Block is a web design element used to highlight and stylize a specific piece of text within a webpage. It typically presents quoted text in a distinctive style, differentiating it from the surrounding content through formatting, fonts, background, or other visual enhancements.
YouTube
Embed a YouTube video with this design block!
Card Stack
A Card Stack Block is a web design element used to display multiple cards on a webpage. It arranges individual card components (which may contain images, text, buttons, or other content), creating a visually organized and structured presentation. When creating a webpage, a Card Stack Block is employed to showcase collections of related content, such as product listings, blog excerpts, portfolio items, or any group of items that benefit from a consistent layout. It helps in presenting multiple pieces of information or content in a visually appealing format that is easy to scan and navigate.
