Call-to-Action Page Block

This page block makes a statement and catches the visitor’s eye, enticing them to click through to specific key conversion pages. This page is intended to be position at the very bottom of your page, just above the footer.

How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks

Check out the series of variations on this page to understand the full capability (white bg)

For clarity, this text was written using the “Basic Content Page Block”, and the Background Color is set to “white”. In the page block below, the “Call-to-Action Page Block” the container around the text is intended to always be navy.

FPO 600x900

Pre-title

H2, Call-To-Action Page Block, Overlapping Block Placement (black bg)

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.

Talk to an Advisor

This Basic Content Section has been added to demonstrate how the “overlapping” variation of the page block background color changes (navy bg)

NOTE: currently, there is no sibling relationship, similar to what Jess has already built for the Large Text page block… I’d like to see if we can borrow the same strategy that was implemented on Large Text page block.

FPO 600x900

Pre-title

H2, Call-To-Action Page Block, Overlapping Block Placement (navy bg)

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.

Talk to an Advisor

This Basic Content Section has been added to help add some separation between the “overlapping” variation above, and the full-width inline variation below. (white bg)

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.

Optional Pre-Title

Call-to-Action Page Block, Inline Variation (black bg)

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.

Ghost Button Example

FPO 600x900