You are using an outdated browser not supported by The Brewers Association.
Please consider upgrading!

Style Guide

BA2019 Atomic Elements

Vcard with image

Photo of Kari Harrington

Kari Harrington

Business Development Manager for Advertising & Sponsorship (West)

303.447.0816 X 167

kari@brewersassociation.org

Usage Notes: For now this element must be entered using the custom HTML block. Simply copy and paste HTML below and edit. It is being considered as a future gutenberg block. Note we often place many vcards in a row. To accomplish this wrap in a BS Flex div (example).

<div class="vcard" itemscope="" itemtype="http://schema.org/Person"> <img src="" itemprop="image" alt=""> <h4 class="alt" itemprop="name"></h4> <p class="alt light" itemprop="jobTitle"></p> <p class="alt light"><a href="tel:303-447-0816" itemprop="telephone">303.447.0816</a> X 167</p> <a href="mailto:kari@brewersassociation.org" itemprop="email">kari@brewersassociation.org</a> </div>

Horizontal Vcard

Members-Only Content On BrewersAssociation.org

Indicated with a lock icon in the menu, these pages feature exclusive content available to BA members only, including extensive industry statistical data, benchmarking information, presentation archives, and technical information.

Usage Notes: For now this element must be entered using the custom HTML block. Simply copy and paste HTML below and edit. It is being considered as a future gutenberg block.

<div class="vcard horizontal"> <figure> <img src="" alt="" /> </figure> <div class="text-content> <h4></h4> <p class="alt light"></p> </div> </div>

Horizontal Vcard Grid (.two-columns.container-wide)

Members-Only Content On BrewersAssociation.org

Indicated with a lock icon in the menu, these pages feature exclusive content available to BA members only, including extensive industry statistical data, benchmarking information, presentation archives, and technical information.

The New Brewer® Magazine

Multiple free subscriptions to The New Brewer magazine for staff members and access to The New Brewer Online.

Brewers Association Forum

Multiple free subscriptions to the Brewers Association Forum, a daily, moderated email digest connecting you to more than 20,000 participating members.

Industry Statistics

Annual Beer Industry Production Survey reports the growth of craft beer industry; featured in the May/June issue of The New Brewer. Access to the Brewery Operations and Benchmarking Survey (BOBS) data, a comprehensive look into brewery operations data.

Members-Only Content On BrewersAssociation.org

Indicated with a lock icon in the menu, these pages feature exclusive content available to BA members only, including extensive industry statistical data, benchmarking information, presentation archives, and technical information.

The New Brewer® Magazine

Multiple free subscriptions to The New Brewer magazine for staff members and access to The New Brewer Online.

Vertical Vcard Grid (.three-columns.container-wide)

Keyword

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at urna congue, egestas ex imperdiet, fringilla diam

Keyword

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at urna congue, egestas ex imperdiet, fringilla diam

Keyword

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at urna congue, egestas ex imperdiet, fringilla diam

Keyword

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at urna congue, egestas ex imperdiet, fringilla diam

Keyword

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at urna congue, egestas ex imperdiet, fringilla diam

Keyword

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at urna congue, egestas ex imperdiet, fringilla diam

Row of Vcards with images

Photo of Kari Harrington

Kari Harrington

Business Development Manager for Advertising & Sponsorship (West)

303.447.0816 X 167

kari@brewersassociation.org

Photo of Tom McCrory

Tom McCrory

Business Development Manager for Advertising & Sponsorship (East)

303.447.0816 X 151

mccrory@brewersassociation.org

Vcard with no image

Abby Berman Cohen

The Rosen Group

|

abby@rosengrouppr.com

Row of Vcards with no images

Abby Berman Cohen

The Rosen Group

|

abby@rosengrouppr.com

Gwen Steuart

The Rosen Group

abby@rosengrouppr.com

.padded-block and variations

.padded-block

border added for visual aid

Usage Notes: .padded-block has 70px of padding on desktop, 40px on tablet and 30px 20px on mobile.

.padded-block.shaded

Media Questions

Abby Berman Cohen

The Rosen Group

|

abby@rosengrouppr.com

Gwen Steuart

The Rosen Group

abby@rosengrouppr.com

Usage Notes: Add class="shaded" to any div to give gray background

.padded-block.shaded-blue

.section-heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel ullamcorper arcu, at vulputate tortor.

Usage Notes: Add class="shaded-blue" to any div to give blue background

.padded-block.with-logo-centered.shaded

Mission

Brewers Publications® supports the mission of the Brewers Association by publishing books of enduring value for amateur and professional brewers as well as titles that promote understanding and appreciation of American craft beer.

Usage Notes: Add class="with-logo-centered" to add logo bug to top of div

.padded-block.with-background-img

Brewing Eclectic IPA: Pushing the Boundaries of India Pale Ale

Pushing the Boundaries of India Pale Ale with 25 Recipes and 200+ unique brewing ingredients

<div class="padded-block right text-right with-background-img"> <img class="background-img" src="" alt="" /> <div class="text-content"> </div> </div>

Usage Notes: Adding class="with-background-img" to a div takes the img inside with class="background-img" and applies it as a background image. The class="text-right" justifies the class="text-content" to the right.

.shaded-partial-height (with static img)

<div class="shaded-partial-height">
 <img src="" alt="">
</div>

.shaded-partial-height (with video)

<div class="shaded-partial-height">
 <div class="video">
  <iframe src="" width="900" height="499" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
 </div>
</div>

Great American Beer Festival Competition

The Great American Beer festival is not only about sampling quality beer but is also a beer competition. The GABF invites industry professionals from around the world to sit together in small groups and, without knowing the brand name, taste beers in each specified style category. The ultimate goal of the judging panel is to identify the three beers that best represent each beer-style category as described and adopted by the GABF.

The Professional Judge Panel awards gold, silver or bronze medals that are recognized around the world as symbols of brewing excellence. These awards are among the most coveted in the industry and heralded by the winning brewers in their national advertising.

Usage Notes: This is a Gutenberg block. Gutenberg allows you to switch the text and media order as well as alter the media size.

Tabbed Content

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney’s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney’s organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven’t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Rollover Gallery- With Captions

Craft Beer Retailer

Continue CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend consequat neque sed imperdiet. Aliquam tristique nulla ut consequat fermentum. Aliquam tristique nulla ut consequat.

Committees

Continue CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend consequat neque sed imperdiet. Aliquam tristique nulla ut consequat fermentum. Aliquam tristique nulla ut consequat.

Breweries

Continue CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend consequat neque sed imperdiet. Aliquam tristique nulla ut consequat fermentum. Aliquam tristique nulla ut consequat.

Individual

Continue CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend consequat neque sed imperdiet. Aliquam tristique nulla ut consequat fermentum. Aliquam tristique nulla ut consequat.

Rollover Gallery- No Captions

Distributor

Find a Distributor

Team

Come Say Hi

Members

Meet the Crew

Allied Trade

Continue CTA

Excerpt Row and variants

.excerpt-row

2018 World Barley and Hops Harvest

Ann George, Thomas Raiser, Walter König, Gina Feist, and Bart Watson

A comprehensive look at the 2018 hops and barley harvests. The U.S. again recorded record acreage for hops, while U.S. barley production increased.

.excerpt-row.excerpt-large

Cannabis and the Beer Industry

Jan 16, 2019

There is currently no evidence that marijuana legalization has had a clear effect in a singular direction on beer sales. See the evidence from Bart Watson.

.excerpt-row.padded-lg.round-img

Matt Meadows, Draft Beer Quality Ambassador

Matt Meadows started with New Belgium Brewing in 2002. In 2006, Matt became director of field quality at New Belgium Brewing. Currently, he oversees a national team that manages all facets of post-brewery quality throughout New Belgium’s distribution in the U.S., Canada, and Europe. Matt is co-author of the BA’s Draught Beer Quality Manual and Draught Beer Quality for Retailers. Matt is the chair of the BA Draught Beer Quality subcommittee and sits on the BA Technical committee.

See Relevant Events CTA Read More in the Resarch Hub

.card.shadow

Washington Brewers Guild Spreads the Good Word in Annual Hill Climb

January 30, 2019

Washington Brewers Guild Spreads the Good Word in Annual Hill Climb

<article class="card shadow"> <a class="grid-image-link entry-link" href=""> <img src="" class="card-image wp-post-image" alt=""> </a> <div class="card-text"> <div class="card-info"> <time class="entry-date">Date</time> <h4><a href="">Headline Goes Here</a></h4> </div> <a href="" class="with-angle-right more-link">More CTA</a> </div> </article>

Icon Lists

This first example is ‘auto columns’ with smaller icons (used on taxonomy descriptions)

<ul class="simple flex-list auto-columns smaller-icons"> <li class="link-with-icon"> <a href="https://www.brewersassociation.org/forums/forum/sustainability/"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/forum.svg" alt=""> Forum <i class="fa fa-angle-right"></i> </a> </li> <li class="link-with-icon"> <a href="https://www.brewersassociation.org/calendar/staff-attending/?staff-attending=matt-gacioch"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/ambassador.svg" alt=""> Ambassador <i class="fa fa-angle-right"></i> </a> </li> <li class="link-with-icon"> <a href="http://www.craftbeer.com/news-and-events/american-craft-beer-week"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/committee.svg" alt=""> Subcommittee <i class="fa fa-angle-right"></i> </a> </li> </ul>

This next example is a 4 column icon list (used on membership benefit pages)

<ul class="container-wide simple flex-list four-columns"> <li class="link-with-icon"> <a rel="noreferrer noopener" href="http://www.craftbeer.com/news-and-events/american-craft-beer-week" target="_blank"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/american-craft-beer-week.svg" alt=""> American Craft Beer Week </a> </li> <li class="link-with-icon"> <a href="https://www.brewersassociation.org/educational-publications/american-craft-beer-guide/"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/american-craft-beer-guides.svg" alt=""> American Craft Beer Guides </a> </li> <li class="link-with-icon"> <a href="https://www.brewersassociation.org/brewing-industry-updates/selecting-a-distributor/"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/wholesaler-considerations.svg" alt=""> Craft Beer Wholesaler Considerations </a> </li> <li class="link-with-icon"> <a href="https://cdn.brewersassociation.org/wp-content/uploads/2013/03/CategoryManagement.pdf" onclick="ga('send', 'event', 'Download', 'doc', {'nonInteraction': false, 'eventLabel': 'https://cdn.brewersassociation.org/wp-content/uploads/2013/03/CategoryManagement.pdf'})" class="doc-pdf"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/category-management.svg" alt=""> Category Management </a> </li> <li class="link-with-icon"> <a href="https://www.brewersassociation.org/business-tools/selling-your-beer/brewer-and-beer-distributor-roles/"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/brewer-distributor-study.svg" alt=""> Brewer Distributor Study </a> </li> <li class="link-with-icon"> <a href="https://www.brewersassociation.org/business-tools/selling-your-beer/chain-buyers-presentation/"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/sell-sheets.svg" alt=""> Sell Sheets </a> </li> <li class="link-with-icon"> <a rel="noreferrer noopener" href="https://www.craftbeer.com/beer/beer-101-course" target="_blank"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/beer-101.svg" alt=""> Beer 101 Course </a> </li> <li class="link-with-icon"> <a rel="noreferrer noopener" href="http://www.craftbeer.com/style-finder" target="_blank"> <img src="https://cdn.brewersassociation.org/wp-content/uploads/2019/05/beer-styles.svg" alt=""> Beer Styles </a> </li> </ul>