BA 2019 Typography

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?

.display – Merriweather 700 @ 52px

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?




Infobox

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

Legacy Infobox Code

With a standard paragraph, or a list

  • Events: 383
  • Participants: 8,500
  • Batches Made: 2,200
  • Gallons Brewed: 17,000
  • Participating States: 49
  • Participating Countries: 14

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

Photo of Kari Harrington

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 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.

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!

Messaging

Messages come from bootstrap. Their examples are wrapped in divs, but should also work in a <p> tag.

A simple primary alert—check it out

A simple secondary alert—check it out!

A simple success alert—check it out

A simple danger alert—check it out

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

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.