Block Pattern Examples
This page shows various HTML examples of blocks showcased on our Block Patterns page.
Page Sections
Columns with connecting line
Content separated by a connecting line that fills in with page scroll.
An example of this pattern in use can be seen on our Brand Foundations page.
- To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
- The header has a large text size. To change this: select the header; go to the Styles tab in the block sidebar; then select a size under typography.
Two-column Page Section
This pattern is available with the image on the right or on the left of the content. The image can be replaced with a video embed (be sure to add a transcript, if needed!). Delete any unused blocks from the content area.
Two-column Featured Article
Large Image with heading and optional call-to-action button on left, content on right. This pattern is for a more detailed introduction to a page link. The button will stick to the bottom of the left column. Remove any unused block from this pattern.
Group With Bottom Inner Line
This pattern is created with a full width group with a background color. A connecting line is added after the content. Padding is removed from the bottom using the dropdown under the Margins & Padding panel in the block sidebar. To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
Full width colored section
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
Group With Top Inner Line
This pattern is created with a full width group with a background color. A connecting line is added before the content. Padding is removed from the top using the dropdown under the Margins & Padding panel in the block sidebar. To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
Group With Connecting Lines
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
Offset Top Image
A nested group is used to create an offset effect on the image. Do not remove the class on this group. The background color can be adjusted in the block sidebar.
Offset Bottom Image
A nested group is used to create an offset effect on the image. Do not remove the class on this group. The background color can be adjusted in the block sidebar.
Two-column section with background
Content and image columns in a full-width group with a background color and connecting lines.
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
The header has a large text size. To change this: select the header; go to the Styles tab in the block sidebar; then select a size under typography.
Offset Bottom Article List
A nested group is used to create an offset effect on the image. Do not remove the class on this group. The background color can be adjusted in the block sidebar.
Lets Connect on Social
Call to Actions and Sidebars
Call To Action Block
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
Announcement Block
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
Sidebars
Content Sections
Two-column with border. Left column has the border class. Borders are toggled in the block sidebar under Borders & Connecting lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nisi, accumsan ut urna eu, pharetra iaculis magna. Vestibulum et enim velit.
Right column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nisi, accumsan ut urna eu, pharetra iaculis magna. Vestibulum et enim velit. Aenean tempus nulla nisl, ut ultricies dolor tincidunt eget. Donec et odio ut urna sollicitudin faucibus at non elit.
Two-column with row border. Left column has the border class. Borders are toggled in the block sidebar under Borders & Connecting lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nisi, accumsan ut urna eu, pharetra iaculis magna. Vestibulum et enim velit.
Etiam ut ultricies arcu. Vivamus sed congue neque. Aenean tempus nulla nisl, ut ultricies dolor tincidunt eget. Vestibulum lacus nunc, eleifend at felis sit amet, pellentesque sagittis mauris. Donec et odio ut urna sollicitudin faucibus at non elit.
Right column with top row has border on bottom. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nisi, accumsan ut urna eu, pharetra iaculis magna. Vestibulum et enim velit.\
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nisi, accumsan ut urna eu, pharetra iaculis magna. Vestibulum et enim velit.\
Photo credits: American Dipper by Photographer/Macaulay Library. Tree Swallow by Photographer/Macaulay Library. Snowy Owl by Photographer/Macaulay Library.
References
1. First Reference (2021) 2. Second reference (2023)
Article Lists
Card Display
Alternate Card Display
List style
On the Antarctic Peninsula, Scientists Witness a Penguin RevolutionExample Article from Living Bird Winter 2016
Coffee Made in the Shade Can Be More Profitable, Thanks to BirdsExample article from Living Bird Autumn 2019
The Quest To Film And Photograph Every Species Of Bird-Of-ParadiseThis article features an embedded youtube video banner.
This is an example of a global CTA
Supporting Text for the global CTA