The Lehigh Clutch Style Guide provides guidance to the what individual components, sections and page layouts will look like. It can be used as a reference for designing new Drupal 9 websites.
Table of Contents
Global
- Colors
- Provides swatches, hex-values and names of the approved colors used within the Lehigh Clutch theme.
- Fonts
- Provides the main font family, font size and font color used on the website.
General
Miscellaneous items used to build pieces, components, sections and pages in Drupal 9.
- Forms: provides general look at what different form fields will look like
- Horizontal Rule
- Imagery
- Icons
- Provides image and class name for each icon used on the website.
- Image Variants
- Table
- Text
Pieces
Individual parts that make up components and sections.
- Accordion Item
- Buttons
- A Tag: Link styled as a button
- Default color variant
- Dark grey button with white text
- Yellow color variant
- Yellow button with black text
- Maroon color variant
- Maroon button with white text
- Green color variant
- Teal-green button with black text
- Blue color variant
- Light blue button with black text
- Button
- Default color variant
- Dark grey button with white text
- Yellow color variant
- Yellow button with black text
- Maroon color variant
- Maroon button with white text
- Green color variant
- Teal-green button with black text
- Blue color variant
- Light blue button with black text
- Call Out
- Paragraph of text that will stand out
- List Item
- Individual list item; different than List
- Page Title
- Pagination
- Profile Image
- Subtitle
- Video
- Video embed with required transcript
Components
Custom blocks of content to put on pages and in sections.