Style Guide

Table of Contents

  1. Typography
  2. Basic UI Elements
  3. Atomic Blocks
  4. Reusable Blocks
  5. Gallery
  6. Custom Fields
  7. Page and Post Templates

Typography


Basic UI Elements


Atomic Blocks

Full Width Image with Card

Implement by adding an Image block with image specs at 1300 x 550. Follow with a Group block and add “card transform-up” into the Additional Classes field.

Awards Ceremony

May 5, 2022

Media + Text

Implement by adding the Media & Text Gutenberg block. No additional classes necessary.

What makes a beer worthy of a gold, silver or bronze award?

“Evaluating beer happens on many levels. On a professional level, beer evaluation is a form of peer review. The results are public, so consumers can learn what beers meet a high level of quality and what beers exemplify certain styles as interpreted by the judges. When industry professionals acknowledge the excellence in products from around the market, the consumer can be sure that those products are the finest available.”

— Chris Swersey, Competition Manager

Contact Row

Implement by adding the Columns Gutenberg block and adding “contact-row” to the Additional Classes field

Bob Pease

President & CEO

Nancy Johnson

Senior Vice President of Meetings and Events

Compliance issues and logo usage

Email Nancy

Chris Swersey

Competition Manager

Judging inquiries

Email Chris

Excerpt Card

Currently not a Gutenberg block because this is built in archive.php.

Excerpt Row

Currently not a Gutenberg block because this is built in the Recent News Woody Snippet. The class “with-stripe-background” is what adds the background yellow stripe.

Lead Paragraph + Info Box

By putting the lead paragraph and an info box into columns, we can control the order that they appear stacked on mobile. Add lead-info-box to the Additional CSS fields of the Columns Block

Competition entries must be received at the shipping address between Monday, March 9 and Friday, March 13, 2020. Detailed shipping information will be sent to participating breweries once the registration process is completed. Please carefully read the following to plan properly and to ensure your beer entries arrive on time. Late entries will not be judged.


Reusable Blocks

About the BA Reusable block currently used on Press Release posts

About the Brewers Association

The Brewers Association (BA) is the not-for-profit trade association dedicated to small and independent American brewers, their beers and the community of brewing enthusiasts. The BA represents 4,000-plus U.S. breweries. The BA’s independent craft brewer seal is a widely adopted symbol that differentiates beers by small and independent craft brewers. The BA organizes events including the World Beer Cup®, Great American Beer Festival®, Craft Brewers Conference® & BrewExpo America®, SAVOR™: An American Craft Beer & Food Experience, National Homebrew Competition and American Craft Beer Week®. The BA publishes The New Brewer® magazine, and Brewers Publications™ is the leading publisher of brewing literature in the U.S. Beer lovers are invited to learn more about the dynamic world of craft beer at CraftBeer.com® and about homebrewing via the BA’s American Homebrewers Association® and the free Brew Guru® mobile app. Follow us on Facebook, Twitter and Instagram.

The Brewers Association is an equal opportunity employer and does not discriminate on the basis of race, color, national origin, gender, religion, age, disability, political beliefs, sexual orientation, or marital/familial status. The BA complies with provisions of Executive Order 11246 and the rules, regulations, and relevant orders of the Secretary of Labor.

English Only Blurb

used on pages where translation dropdown is not offered, i.e. Contact Us

Editing this block affects all of its instances except for on Participating Breweries and Award Winners. A developer will need to update the language for those pages.


Implement by adding the standard Gallery from the Gutenberg blocks and selecting “Media File” from Link to dropdown. A third-party plugin called Featherlight displays each image in a lightbox when clicked.


Custom Fields

Site Wide Banner

This custom field is only shown on the back end of the home page but it controls the banner that displays on every page of the site.

When the field is empty, no banner is displayed:

Adding text into this field displays the banner. Please note in the example that in order to add a hyperlink to the banner, you will need to use HTML markup:

The banner comes with a default background color, but you can change this by adding a hex value into the Site Banner Color field. Best to consult with Sarah Baldwin before doing changing the color or this can happen 🙂

Float Image Right

Available on all pages and posts. If the featured image is at least 1100px wide, you have the choice for it to be full-width or a small, square image floated right. Turn on this custom field it you would like it small, square and floated right.


Page and Post Template Inventory

Page Templates

  • Default
  • News
    • Custom archive that pulls in posts tagged with “news” and “press release”
  • Splash
    • Can be used post-event

Post Templates

  • Default
    • Posts expect a featured image
    • If the featured image is at least 1100px wide, the default layout will be full-width but you can convert it to a smaller, square image by using the custom field, Float Image Right
    • If the featured image is less than 1100px wide, the image will automatically be the smaller, square layout
    • The About the BA reusable block is available to use on posts