Style Guide

Body Blocks: Enhancing the Main Body of Content

This is the "Body" Section of a page.

Body blocks can be added below the rich-text area on any block. They are designed to mimic the rich-text styles (inline images, buttons, arrow links, raw html embeds) we're used to on a standard PaaS Opti site.

Body blocks will most often be used on article and case study pages — any page that includes a rich-text body area by default.

Body Block Examples.

The following examples show potential combinations of body blocks. Headings in this section are also created using body blocks.

These are Text and Image Blocks.

This is a Body Image block aligned to the left side of the main body.

This is the text block. It is a body-width rich-text section with full use of all headings and formatted code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum at nisi ut convallis. Phasellus tempor vel enim vitae pharetra. Nulla sit amet nibh quis diam vulputate tincidunt sit amet vitae sapien.

Donec porttitor lorem sit amet semper venenatis. Suspendisse elementum aliquet enim sit amet cursus. Cras condimentum ullamcorper augue id porttitor. Integer suscipit semper tellus eget ullamcorper. Maecenas vel dignissim ligula.

This is a Body Image block aligned to the right side of the main body.

This is the text block. It is a body-width rich-text section with full use of all headings and formatted code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum at nisi ut convallis. Phasellus tempor vel enim vitae pharetra. Nulla sit amet nibh quis diam vulputate tincidunt sit amet vitae sapien.

Donec porttitor lorem sit amet semper venenatis. Suspendisse elementum aliquet enim sit amet cursus. Cras condimentum ullamcorper augue id porttitor. Integer suscipit semper tellus eget ullamcorper. Maecenas vel dignissim ligula.

This is a Body Image block centered across the full width of the column.

This is the text block. It is a body-width rich-text section with full use of all headings and formatted code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum at nisi ut convallis. Phasellus tempor vel enim vitae pharetra. Nulla sit amet nibh quis diam vulputate tincidunt sit amet vitae sapien.

Donec porttitor lorem sit amet semper venenatis. Suspendisse elementum aliquet enim sit amet cursus. Cras condimentum ullamcorper augue id porttitor. Integer suscipit semper tellus eget ullamcorper. Maecenas vel dignissim ligula.

These are Buttons.

Black Button (Large) Black Button (Small) Blue Button (Large) Blue Button (Small) Green Button (Large) Green Button (Small) Outline Button (Large) Outline Button (Small)

These are Links.

Black Arrow Blue Arrow Default Arrow

This is a Raw Code Embed.