This is a standard page. For display purposes we will include a featured image, author (cite), and published date (time) @todo. But note stock pages will not have that information. The above is just a manually embedded mock of this data.

Note that this page will evolve as we add more items to our design library.

This is a sentence with a quote icon in front of it. Use class="with-quote-icon"

a.with-angle-right

We are using Merriweather from Google Fonts, in 400 and 700 weight. Body copy is 15px Helvetica @ 1.4 line-height.

Sometimes we just want a simple, smaller paragraph style. (use dropdown from Text Settings). Note this is not the same as using the <small> HTML element

The small element is usually reserved for captions and the like. Not sure if editors should have access to this?

Also we may use the option of a larger paragraph (use dropdown from Text Settings)

Now back to a normal paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

h2 or .h2 – Merriweather 400 @ 30px

Now back to a normal paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

H2 Block Heading

The above “h2.block” header can be used anywhere, and can span slightly wider than the normal content, or 100% width on smaller screens. An image can be used or omitted. Simply add class .block-heading to any h2 element or inspect the above HTML.

This is a .section-heading 42px

h2.section heading will be treated as h1 on events page (larger font size)

h3 or .h3 – Merriweather 400 @ 24px

We reserve the right to feature some text using the class p.large (16px Merriweather)! Note this also be included in Gutenberg editor

With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

h4 or .h4 – Merriweather 18px

With a paragraph (note spacing) and a link. Each individual brewery may enter a maximum of 10 beers in the competition. The first five beers will be served at the festival and a maximum of five additional beers may be entered in the competition. A beer brand may only be entered in the competition once, but a brewery may enter different brands in the same category. Each entered brewery may pour a maximum of five beers at the festival. The limit is 10 beers for sponsor breweries pouring at endcap booths. (Brewpub Groups: see page 13 of the Brewers Guide to entering the GABF for maximum number of entries and booths.)

Horizontal rule

Gutenberg comes with 3 rules (separators): Wide, Short, and Dots. @baldwin do you want to use or customize these?

---

---

---

Separator with shortened vertical space:

---

Add small to the Additional CSS Classes field

Infobox

We have this legacy concept of .infobox we need to support. See second example of an infobox from the Kadence Gutenblock Plugin

Blockquotes

This is a standard blockquote. Use the blockquote tool from the editor. Its quite likely this will be a long ass quote. Saga of “The Ale Pail and the Step Ladder.” Today I bid farewell to my brewing aluminum stepladder and the original 20-gallon plastic pail (trash container) in which I brewed my original pail ales. These two are on their way to the Smithsonian, joining my spoon and a few other remnants of my 1970’s homebrewing life. There the Smithsonian staff are using words like “fantastic” and “immensely exciting” and “fun” and “authentic,” etc. On this side, melancholy has set in. Goodbye Ale Pail. Goodbye Step Ladder.

Charlie

This is a larger blockquote. Use the blockquote tool from the editor.

It can include citations

This is a blockquote with an author image. As consumers continue to demand a wide range of high quality, full-flavored beers, small and independent craft brewers are meeting this growing demand with innovative offerings, creating high levels of economic value in the process.

Bart Watson, Brewers Association Chief Economist

Bart Watson

Chief Economist for the Brewers Association

h2. Lists and tables

Here is an Ordered list

1. Item 1
2. Item 2
3. Item 3

Here is an Ordered list with class .stylized

1. Item 1
2. Item 2
3. Item 3

Here is an Unordered list

• Item 1
• Item 2
• Item 3

You can drop the numbers or bullets from a list by adding a class of .simple

• Item 1
• Item 2
• Item 3

---

Below find a special list that includes a heading and image. Currently used on Beer Style Guidelines page. To toggle this check out the extra classes under ‘advanced’.

• 
• This is the heading
• this is the list item
• another list item

---

This is a special list with heading, but no image. To toggle this check out the extra classes under ‘advanced’, or add .heading to any li:list-with-heading simple

• This is the heading
• this is the list item
• another list item

---

Here is another special list – horizontal list. Used on Beer Styles guidelines page, but could be used anywhere. Add class .horizontal

• Original Gravity (°Plato) 1.033-1.038(8.3-9.5 °Plato)
• Apparent Extract/Final Gravity (°Plato) 1.006-1.012(1.5-3.1 °Plato)
• Alcohol by Weight (Volume) 2.4%-3.3%(3.0%-4.2%)
• Bitterness (IBU) 20-35
• Color SRM (EBC) 5-12(10-24 EBC)

Links with icons

Links that point to a certain filetype will automatically have the relevant icons appended at the end. Here we see this style with our normal body font.

• Download Zip Link
• Doc or PDF Link
• Audio Link
• Video Link

Horizontal Icon List

Now we are starting to group a few styles together, in this case a .horizontal list with icon links, so we add .simple to remove the bullets and .border-0 from bootstrap because damnit, we don’t always need a border!

• Download Zip Link
• Download Audio Link
• Download Video Link

Messaging

Messages come from Bootstrap and should be embedded here using the Gutenstrap Alert block

We also have legacy messages from the old theme, so make sure they work too!

Legacy primary message

Legacy warning message

Legacy danger message

And finally, an alert can be dismissable though it requires role="alert". We will have to hardcode this for now until we get a gutenblock.