Lehigh Clutch Style Guide

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.


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.