Style Guide
Simple Styleguide
Your guide to the markup & styles that aren't tied to a specific component, such as colors, typography, alignment, anchors, buttons, pull-quotes, embeds, the grid, and more.
Drupal Component Examples
Examples of all the things you can build using existing components.
- Accordions (Standard and FAQ)
- Accordion/Tab Combo (Accordion on smaller screes and Tabs on larger ones)
- Author Quotes (Quotes that include the author's details and avatar)
- Block Grids (repeating cells of the same size)
- Callouts (Standard, chevron, and subcomponents like roof icon and label)
- Cards (Templated and custom)
- Carousels (Content and Image)
- Circle Image Components (Circle image bars, button rows, and stacked groups)
- Columns (pre-sets, offsets, centered, custom)
- Content Bands (default & fluid, including margin and background options)
- Expand/Collapse Components (togglable media and content)
- Image Panels (Full-width images, modals, videos, and Image panels with offset text)
- Offset Media Panels (Indented and video media panels)
- Paged Link List
- Podcast Component (for Buzzsprout audio)
- Tables (Striped, Unstriped and Scrolling)
- Tabs (Horizontal/Vertical)
- Tall Content Panels (landing pages only)
- Vertical Centering (vertically centering text with images)
Front End Dev Resources
Design Checklists
- For Touch Checklist
- Hamburger Checklist
- Navigation Checklist
- Privacy Checklist
- Accordions Checklist
- Carousel Checklist
- Sliders And Video Checklist
- Tables Checklist
- Cards Checklist
- Timelines Checklist
- Filtering Checklist
- Maps Charts Checklist
- Schedule Calendars Checklist
- Configurators Checklist
- Date Pickers Checklist
- Feature Comparison Checklist
- Seating Plans Checklist
Downloadable Templates
- Web Based Applications Template
- Hat-and-Shoes Repo (Contains a stand-alone bundle of the global nav and footer)