The B1 block is only intended for use on the homepage, and can be used to highlight stories, pages, or even external links. Each card can have a primary and secondary image, a headline, a tagline, and a CTA.
B2: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
The B2 is intended as a subpage hero module. Each block can have a primary and secondary image, a headline, a tagline, a description, and a CTA. The B2 can also have a Brightcove or YouTube video added, which enables a play button on the primary image. The block must have a primary image and a title.
B3: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
Primary CTASecondary CTA
The B3 is intended as a subpage hero module. Each block can have a headline, a tagline, a description, and a primary and secondary CTA. The block must have a title.
B4: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
B4: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
B4: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
The B4 is a title block. Each block can have a headline, a tagline, a description, and a primary and secondary CTA. The B4 block can either have content aligned left or center. It also has an optional image background. The block must have a title.
B5 solo
B5: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
The B5 content block can either be used as a single block, as seen above, or as a duo, as seen below. If the B5 is used as a duo the blocks will fit together. Each block can have an image, a headline, a tagline, a description, and a primary and secondary CTA. All B5s must have an image and a headline.
B5 duo
B5: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
B5: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
B6
This is an example of how a headline with ( max ) 70 characters scales
B6: This is an example of how a headline with 70 characters scales in list
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
This is an example of how a headline with 70 characters scales in list
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
The B6 is an accordion block. Each accordion item has a title and content, and the block itself has a tagline and a title. Hover over the right side of the cards to add a new accordion item, and hover over the left to drag and drop to rearrange.
B7
This is an example of how 40 char. scale
This is an example of how 340 character scale, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat null.
This is an example of how 40 char. scale
This is an example of how 340 character scale, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat null.
This is an example of how 40 char. scale
This is an example of how 340 character scale, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat null.
This is an example of how 40 char. scale
This is an example of how 340 character scale, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat null.
This is an example of how 40 char. scale
This is an example of how 340 character scale, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat null.
The B7 is a related links block. The number of cards is specified at the top, with a maximum of 8 related links. Each link has a title, a subtitle, a description, a link, and an image. The card itself has a title, a subtitle, and a CTA.
B8
B9
B10
B10: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
B11
B12
B14 no image
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
Button with 25 charactersThis is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
Button with 25 charactersThis is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
Button with 25 charactersB14 with image
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
Button with 25 charactersThis is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
Button with 25 charactersThis is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
Button with 25 charactersB15: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how 340 character scale, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat null.
The B15 block is created by using WordPress's built in column block. You'll create a 2 column block and set the left column to 32% width. The left column has an h3 heading, and an optional primary CTA. The right column has an optional h5 heading, paragraph text, and an image. The image is in a standard WordPress image block, and is aligned center.
You can also add a border over each B15 block with a helper class. When adding a border to B15, make sure the entire Columns block is selected.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
- This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
- This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
- This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
- This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
B17
This is an example of how a headline with ( max ) 70 characters scales
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is an example of how a headline with ( max ) 70 characters scales
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
B18 no image
B18 with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu molestie dolor. Nunc rutrum quis nibh et scelerisque.
Position · Location
B18 video & multiple blocks
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu molestie dolor. Nunc rutrum quis nibh et scelerisque.
Position · Location
B21
B21: This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
This is an example of how a headline with ( max ) 70 characters scales
This is an example of how a meta text with 120 characters scales. Enim aminim veniam, quis nostrud exercitation ullamco.
B23
The B23