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!
Buttons
Cards
Accordion
By The Numbers (Model)
This is a by the numbers block
We only serve low-income students with high potential
We are one of Kentucky's most selective colleges.
Most Berea students will be the first in their families to earn a four-year college degree
Chart(s)
Ultricies fusce rutrum placerat aliquam nec auctor phasellus litora eleifend vitae vivamus suscipit molestie tempus maecenas, gravida pulvinar lacus venenatis nam class dolor est nisl erat taciti scelerisque cras. Leo primis fames metus ipsum pellentesque commodo proin porta integer sollicitudin ornare cubilia, lacinia imperdiet mi venenatis diam mus convallis suspendisse fusce sodales. Facilisis ornare felis commodo pellentesque eleifend quisque vestibulum velit vehicula gravida pretium, sagittis cubilia luctus taciti auctor posuere proin aenean sem penatibus.
Custom Quote
Turpis tellus nullam suspendisse dui leo aliquet quam phasellus nulla fermentum viverra, at maximus vehicula rhoncus ultricies netus tempor ipsum porta orci. Primis semper nam torquent tellus quam pellentesque conubia laoreet inceptos nullam iaculis, ultricies diam habitant tincidunt ac lorem fermentum non cras id. Torquent euismod phasellus blandit sem dis sollicitudin eleifend non primis, consectetur tellus pretium placerat erat vulputate aptent.
Departments
African and African American Studies
Graduates receive a Bachelor of Arts (BA) in African and African American Studies (AFR). A minor is also available. The department’s central mission is to offer students a deeper understanding of the intellectual, political, and cultural contributions of people of primarily African descent. The interdisciplinary approach of African and African American Studies provides students with the opportunities to engage in critical thinking across a spectrum of fields, including history, psychology, environmental and agricultural science, gender and sexuality studies, peace and social justice studies, transnational migration, political science, economics, health, media and technology, art, literature, music, theater, and other forms of expressive culture.
Agriculture and Natural Resources
Graduates receive a Bachelor of Science (BS) in Agriculture and Natural Resources. The ANR Program’s curriculum provides all students with a sound foundation in ANR with flexible options to pursue training in particular areas of interest including the sciences, animal science, and natural resources management. Students often pair their ANR major with a minor in Sustainability and Environmental Studies, Forest Resource Management, or Business Administration.
Appalachian Studies
An Appalachian Studies (APS) minor is available and will complement and enrich any major program at the College. Berea students may also pursue an Independent Major in Appalachian Studies. Appalachian Studies is a multidisciplinary program examining various aspects of Appalachia. APS offers course work in literature, health issues, history, crafts, sustainability, entrepreneurship, contemporary issues, art, gender, and race in the region and how it interacts with the nation and world.
Form
From the Source
Gallery Grid
Gallery Grid with Search
Find what interests you
People
Ac ad proin posuere metus dui blandit
People
Feugiat inceptos ligula felis nibh quisque diam
People
Condimentum luctus dolor nascetur tempus blandit finibus
Heading
Heading Level 1 (h1)
Heading Level 2 (h2)
Heading Level 3 (h3)
Heading Level 4 (h4)
Heading Level 5 (h5)
Image
Image Stack
List
- This is a list item
- And another list item
- Can we go 3 for 3
Paragraph
These are paragraph blocks.
Est dictumst justo pretium in magnis tellus ipsum, tempor vehicula enim dui cras donec. Montes sodales tristique natoque lorem magna aliquam enim donec interdum sit nisl leo dignissim et, in habitant consequat potenti luctus dictum at eleifend efficitur felis aenean sagittis. Facilisis habitant hendrerit a ullamcorper accumsan feugiat ad ut suscipit purus neque ipsum consequat natoque aenean, pharetra elementum blandit gravida curabitur posuere volutpat tristique vivamus lectus leo fringilla molestie. Velit imperdiet himenaeos curabitur nostra ac eget nascetur mauris luctus, in taciti quam torquent cras suspendisse netus pulvinar aliquam, malesuada ex et fusce tincidunt feugiat ligula auctor. Ultricies posuere placerat congue curae venenatis erat interdum dignissim sapien nam at ridiculus viverra, ante felis maximus lorem cubilia quisque magna platea integer himenaeos ac. Dis mauris cras posuere neque ante sociosqu lacinia sollicitudin viverra ornare porta nunc vehicula leo, pulvinar facilisis maecenas est felis tempor quis efficitur per curae euismod iaculis. Dapibus lectus amet facilisi vel litora maximus nostra orci turpis nisl nascetur lacus, euismod himenaeos cras quis vitae sit praesent aliquam enim montes. Ad fringilla turpis augue cubilia litora fermentum massa, proin quam vulputate vitae gravida est. Sodales lacus diam venenatis sollicitudin maecenas taciti nec ornare donec himenaeos inceptos dui enim magnis dapibus, risus eu class blandit finibus hac congue per nam rutrum adipiscing nibh auctor et.
Lorem natoque quis tellus dignissim ligula duis torquent, egestas nunc adipiscing dapibus orci. Pretium accumsan elementum dis adipiscing tincidunt conubia aptent egestas morbi fermentum neque leo, velit feugiat odio dictumst hac mollis sed fusce phasellus rhoncus mattis. Sed vitae morbi risus orci et ligula id auctor senectus lectus nam, cubilia maecenas sem in dui blandit fusce efficitur montes. Himenaeos sapien integer tincidunt duis platea non nisl adipiscing sollicitudin per eget fringilla, pulvinar mauris id montes faucibus consequat consectetur suspendisse libero curae. Fermentum facilisis aptent facilisi egestas proin sem morbi ligula, tincidunt habitasse suscipit neque mi praesent. Mattis mauris auctor quis consequat dignissim tincidunt pharetra dictumst ligula lacinia dui euismod nulla phasellus fringilla elit maecenas, dapibus magna morbi duis donec nam venenatis platea scelerisque leo ut ad nec vulputate curae.
This is a link: https://www.berea.edu
Paragraph text can also be hyperlinked.
List in a Paragraph
- List item 1
- List item 2
- This is a long list item donec convallis quam euismod finibus pulvinar nec Justo eu magna mus pretium magnis mattis tristique donec curabitur luctus faucibus, torquent per dictum platea placerat parturient inceptos maecenas fermentum etiam. Sem vehicula etiam facilisi eleifend amet duis quisque volutpat iaculis nisl porta, orci class lectus varius sodales vivamus sociosqu curabitur vestibulum. Magnis efficitur fringilla porttitor magna lobortis cras vehicula tincidunt adipiscing suspendisse ligula tempor dapibus, odio faucibus nibh habitant velit quis posuere nunc ultricies morbi aliquam aliquet.
Search
Stat
Suscipit eros netus lacinia sollicitudin aenean libero magnis taciti dis suspendisse id pretium, bibendum mattis convallis cursus enim gravida metus quisque euismod lobortis. Potenti venenatis ultricies porttitor phasellus turpis ullamcorper urna ante ut leo, pellentesque consequat auctor nullam diam praesent faucibus lectus arcu. Duis litora consequat porta neque ornare libero est elit pretium curae eget suspendisse varius platea dis facilisis vestibulum in volutpat.
Ut penatibus maximus praesent sapien et vel eleifend vulputate, urna himenaeos netus mattis tincidunt primis fringilla, convallis hendrerit in fermentum arcu pharetra erat. Fusce elit integer diam tellus auctor velit dignissim est curae arcu nascetur elementum felis facilisi, aliquam aenean mattis mollis magnis ridiculus natoque consectetur morbi pellentesque ligula fringilla. Non ornare malesuada nec venenatis nunc hac at luctus litora auctor viverra, interdum convallis et maecenas montes odio quis hendrerit lacinia nascetur.
Taciti et ac lectus lacus morbi faucibus donec sagittis cursus senectus, gravida tincidunt eu massa praesent fermentum dictumst quisque mus. Laoreet mollis curabitur dapibus finibus blandit faucibus lacus bibendum elementum consectetur, dignissim nec pretium aptent fringilla fames maecenas phasellus. Praesent diam phasellus duis tellus fermentum dolor, turpis sapien scelerisque auctor erat. Pretium dictumst tortor accumsan duis nec iaculis varius curabitur, fringilla metus torquent mollis non tellus tincidunt in, dis vulputate sit pellentesque massa laoreet tempor. Congue donec proin efficitur pharetra metus bibendum augue aenean varius, libero consectetur dolor torquent quam ligula inceptos ante.
Faculty Story (Model)
Success Story (Model)
Video Hero
Custom Quote
This is where you put someone's quote. Don't worry, the lack of an end quotation is intentional — it is a style choice.