Design System
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!
Commonly Used Blocks
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.
Read the Berea College Magazine
The Berea College Magazine is published quarterly for alumni and friends.
Learn More
Explore quick facts about Berea College!
Make a Gift
Berea College only serves students with limited resources and unlimited potential. Your donation has a significant and far-reaching impact.
Follow Us on Social Media
Connect with us @bereacollege!
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
That's one faculty member for every eight students.
Student debt disproportionately impacts economically disadvantaged families. That's why Berea College has been paying for students' tuition since 1892.
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.
Berea College brings together qualities that are unheard of at other universities. Berea College moves ideas and ideals into action in ways no other university does. I look forward to listening, learning and being a part of such a vibrant and caring community.
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.
“I’m really glad I found a place where I can really nurture a lot of myself. The academics, the labor and then socially with the community. Those three things are what make Berea special.”