Above is our standard H1, used on page and post titles. 50px / Freight Micro / 400 / #373737 ($headline-color or $gray-dark)
Basic Typography
Note that we shouldn't ever use h1 other than the page title, except in special situations.
Standard paragraph text is 16px / Future PT / 400 / #555 / 1.428 line-height. 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.)
Small body copy can be toggled via block settings. 14px / Futura PT / 500 / #373737
h1.display
h1.display is used in special circumstances, mostly landing pages like Brew Guru or the Free Trial page. 60px / Futura PT / 500 / #373737
h2. 40px / Futura PT / 500 / #373737
h2.with-mini-hr
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.)
h3 or p.lead. 26px / Futura PT / 400 / 1.4 / #555555 ($text-color or $gray)
p.lead can be used for "display sentences" and is available via the editor's block settings. Add a class of 'text-uppercase` for an all caps variant H3 subhead. If you set text-align to center we'll max out at 800px to keep that paragraph readable. Example in the wild.
Here is an example of p.lead, 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.
h4 or p.large. 20px / Futura PT / 400 / #555
h4 and p.large are the same size. p.large is available via the paragraph's block settings but editor's should not ever need to use it. Use h4 for 20px headings.
Types of Links:
Media/download links are auto generated based on the extension of the link (i.e. .mp3 will automatically convert to a.audio). Text Link is manually modified by adding the class in gutenberg
Note most of these CTA links are auto-generated, but can be also inserted manually. If the link CTA is short and on its own line, use text-link. If the CTA is longer or inline with text, use text-link text-link-inline
Lists
- Ordered List
- Item 2
- Item 3
- Unordered List
- Item 2
- Item 3
- This "simple" list
- doesn't have any bullets
- add 'simple' as a class!
Blockquotes
This is the standard gutenberg blockquote, please don't use this! If we find a need to use blockquotes on the site please contact Baldie and Web Dept to create a new task.
- Citation (Note this is optional)
With a paragraph to help show what the floated blockquote looks like. 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...
Inline Imagery
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...
Note the captions on images can be overridden by adding a class to the parent image. Use caption-left or caption-right as needed
An h3 to introduce this content
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.
An h3 that 'clears' the above float
Default Right Align With a paragraph (note spacing) and a link.
Note right now you need to add this class manually but will work on making it gutenberg ready.
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.)
An h3 just to break up this content
@Baldie - any rules around using an full width image?
Alignnone and Aligncenter will span 100% of container, with max-width of 1000px - this helps keep content readable. 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.)
Tables
This simply uses the stock table block, and you can toggle on header, footer and/or caption.
| Zymurgy Issue | Release Date |
|---|---|
| January/February 2020 | December 23, 2019 |
| March/April 2020 | February 14, 2020 |
| May/June 2020 | April 22, 2020 |
| July/August 2020 | June 22, 2020 |
| September/October 2020 | August 24, 2020 |
| November/December 2020 | October 21, 2020 |
| Footer Cell (please request styling) | Footer Cell |
Alerts
Use the Alert block by Gutenstrap to add inline alerts/warnings to any page or post. Content will span 100% of space available and clear any floated content above. @sarah - would you prefer these only span our $max-text-width @sarah can you add some notes on appropriate use of these elements.
Share Post