Style Guide

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

🚀 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.

Note: tailwind created classes won't render in the style guide until they're used elsewhere on the site. Purge will remove them before the loop runs.

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

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