Buttons
Primary button is used for the main CTA on a page. Implement by searching “button” in the Gutenberg blocks and selecting Button (not Buttons- that’s a different block)
Secondary button is smaller than the primary button. Used when a quieter CTA is desired (i.e. Newsletter signup in footer). Implement by adding the Button Gutenberg block as described above and then adding “btn-secondary” to Additional CSS classes field.
Alt button looks like a text link with an :after arrow element. Used when a quieter CTA is desired. Implement by adding the Button Gutenberg block as described above and then adding “btn-alt” to Additional CSS classes field.
Dropdowns
Dropdowns will almost exclusively be implemented by the dev team.
They can be used standalone or part of a larger internal navigation structure (we use the .wp-block-buttons
syntax for that, which also will center that button). Live Example.
Simple Input + Button (Inline Form)
Will exclusively be implemented by dev team. Can be part of a .wp-block-buttons
block to center and have additional styling. Live Example.
Info Boxes – 3 Varieties
Standard
All info boxes are floated right. Implement by selecting “Info Box” from the Gutenberg Blocks.
With Image
WBC Shipping Address
BA – WBC 2020 587 S. Taylor Avenue
Louisville, CO 80027
Add “with-image” to Additional CSS Classes field
With Smaller Text
When you have a lot of content to fit into an info box, you may want the text to be a smaller font size. Implement this variety by adding “with-smaller-text” to the Additional CSS Classes field.
Accordion
Implement by selecting Accordion from the Gutenberg Blocks.