Skip to content

Style Guide

Jump to bottom
Jules edited this page Oct 15, 2021 · 13 revisions

The style guide is built into the base Drupal site, and renders the styleguide.html.twig template at /style-guide.

🚀 Quickly customize styles

As new font, button and link styles are added, simply add the new class name to the appropriate array to get an updated style guide.

Customize Fonts, links, buttons

fontStyles btnLinkStyles iconBtnLinkStyles

🌈 Customize text and bg colors

Not all colors should be used for text or background colors. Update these arrays to show how colors should be used on the site. textColorsDk: render on a white background textColorsLt: render on a black background bgColorsDk : render with light text bgColorsLt : render with dark text

🏁 Starter templates

In templates/_samples are sample paragraphs that match the base styles the design team is using in Figma. To get a jump start on common block and paragraph styles, copy one of these templates or edit the sample. They are included at the bottom of the style guide, so feel free to update, delete and modify in your project as needed.

Sample templates include:

  • sample-2-up cards
  • sample-3-up cards
  • sample-listing for search results
  • sample-footer
  • sample-pagination with Drupal pagination markup
Clone this wiki locally