Welcome to your Custom Blocks style guide. These blocks require the editor to add an additional class to a stock gutenberg block. Notes on how to create and use each block is included via Usage Notes, but we simply recommend copy and pasting into your new page!
Nugget with Featured List
Editor Note: This is a complicated set of nested column blocks. Copy and paste before editing. Example: Membership Benefits page
Note in the above example a horizontal rule then the next block has an additional class of .reversed to swap the order of text and image.
@baldie can you add some usage notes here.
Explore 2,500+ discounts (and growing) in the U.S. and worldwide.
Full Width Text with Icon Block(s)
Currently used on Membership Benefits page. Note there is also a variation of this with more than one icon + text (See original comp) but not currently available on site. Nate would like to improve the functionality here so it doesn’t share code with the above Featured Nugget list but is rather a standalone block, probably media + text rather than columns.
Vertical Text with Icon Blocks
Another fun way to showcase a group of content, stacking icon on top of text. Nested column blocks and recommended to copy and page the entire parent block as a starting point due to all of the custom classes needed. This is a complicated block and should be used sparingly. It requires the use of an icon or small thumbnail visual. It will mainly be limited to explaining features and benefits of an AHA membership, though we may find a use for this block to house homebrewing content. Example Join or Renew landing page
Can add up to 3 Contact Blocks within a Gutenberg Columns block. Ex. the Member Services block at the bottom of this page.
Also note that most often we have a reusable block dedicated to the “sales team” or “member services” team so use those when adding repeated content.
Member Services Operations Manager
Enhanced Contact Block (Vcard)
@sarah I found this on the event pages but looks like the styling needs to be updated. Can you help?
Use the YouTube Gutenberg block to embed the video and then add “shaded-partial-height” to the Additional CSS Classes field. Used in a full-width page. Example here.
Usage: Block of 3 articles. Images link to the post/article. Uses Gutenberg Columns block and WP’s Media Block, then add captions. Example here on Easy Guide to Making Beer
Fancy columns block to feature an author or person. Image should be uploaded round, but we’re working on a version that doesn’t require a png. Example here.
Please do not hardcode the column widths here, just let the CSS do it’s thang.
How To Brew author John Palmer was born and raised in Midland, Michigan. He is author of the bestseller How To Brew: Everything You Need to Know to Brew Beer Right the First Time, co-author of both Brewing Classic Styles and Water: A Comprehensive Guide for Brewers.
A passion for science and a desire to work in the space program led John to Michigan Tech where he graduated with a degree in metallurgical engineering. A lucky break gave him the opportunity to apply for a metallurgical position at a failure analysis lab in Irvine, California, and he has been living in the LA area ever since. During this time he has helped design, build, and inspect hardware that is currently flying on the International Space Station, worked in research and development of orthodontic appliances, and written three popular books on the brewing of beer.
Owning How To Brew is like having a brewmaster as your best friend. In the 30-plus years since the American craft beer revolution got its start, countless brewing books have appeared. None, however, has achieved the status of How To Brew, which is thorough, comprehensive, and beautifully organized. And now, this new expanded and enhanced edition improves on the original. It’s a considerable feat to create a book that is invaluable both to first-time brewers and professional brewmasters, but John has done it with a book that is essential for everyone who is serious about brewing.
Founder & Brewer of Samuel Adams
Promo with Fermentation Background
A simple little widget with a nice background, should span 100% width. Uses the Group block with custom classes, then headings.