General Content Blocks

Displaying examples of "General Content" blocks with each color option, with Call to Action, Callout and Secondary Callout options, along with examples of the "Split Content" blocks with various options.

General Content: Call to Actions

  • When to Use: It is best for single-use on a page to promote a clear action.
  • When Not to Use: In too many areas on a single page.
  • Where It Appears: While you can place this anywhere, it is best placed near the top of the page content, but after the page content has been introduced.
  • How to Place It: TBD
  • Example Uses: schedule an appointment, request information, contact us

Call To Action

Supportive text about clever heading. More supportive text about clever headline. Text Link

Button

Duis rutrum metus vel diam. Donec eu erat. Nunc condimentum condimentum lorem. Phasellus placerat est id mauris. Curabitur laoreet ante eu libero. Vestibulum aliquet nibh sit amet mi.

Call To Action Left

Supportive text about clever heading. More supportive text about clever headline. Text Link

Button

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

Call To Action Right

Supportive text about clever heading. More supportive text about clever headline. Text Link

Button

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.


General Content: Callouts

  • When to Use: When you want to emphasize or highlight information related to the subject of the page.
  • Where It Appears: TBD
  • How to Place It: TBD
  • Example Uses: patient stories, pull quote or highlighted comment, virtual tour or any clickable element/action to take that is secondary to the primary CTA for the page

Callout

The callout images here are 312 wide. They can be any height and width. Float to the right or left using the style dropdown. This is a text link.

Primary Button

Callout Left

The callout images here are 312 wide. They can be any height and width. This is a text link.

Primary Button

This is sample paragraph content.

This is a text link.

Duis rutrum metus vel diam. Donec eu erat. Nunc condimentum condimentum lorem. Phasellus placerat est id mauris. Curabitur laoreet ante eu libero. Vestibulum aliquet nibh sit amet mi.

  • ac placerat felis massa vel neque
  • Maecenas tincidunt iaculis libero
  • Nunc malesuada pulvinar leo

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

Callout Right

The callout images here are 312 wide. They can be any height and width. This is a text link.

Primary Button

Duis rutrum metus vel diam. Donec eu erat. Nunc condimentum condimentum lorem. Phasellus placerat est id mauris. Curabitur laoreet ante eu libero. Vestibulum aliquet nibh sit amet mi.

  • ac placerat felis massa vel neque
  • Maecenas tincidunt iaculis libero
  • Nunc malesuada pulvinar leo

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.


General Content: Secondary Callouts

  • When to Use: When you want to emphasize or highlight information related to the subject of the page, but have other callouts of more importance.
  • Where It Appears: TBD
  • How to Place It: TBD
  • Example Uses: patient stories, pull quote or highlighted comment, virtual tour or any clickable element/action to take that is secondary to the primary CTA for the page

Secondary Callout

The callout images here are 312 wide. They can be any height and width. Float to the right or left using the style dropdown. This is a text link.

Primary Button

Secondary Callout Left

The callout images here are 312 wide. They can be any height and width. Float to the right or left using the style dropdown. This is a text link.

Primary Button

This is sample paragraph content.

This is a text link.

Duis rutrum metus vel diam. Donec eu erat. Nunc condimentum condimentum lorem. Phasellus placerat est id mauris. Curabitur laoreet ante eu libero. Vestibulum aliquet nibh sit amet mi.

  • ac placerat felis massa vel neque
  • Maecenas tincidunt iaculis libero
  • Nunc malesuada pulvinar leo

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

Secondary Callout Right

The callout images here are 312 wide. They can be any height and width. Float to the right or left using the style dropdown. This is a text link.

Primary Button

This is sample paragraph content.

This is a text link.

Duis rutrum metus vel diam. Donec eu erat. Nunc condimentum condimentum lorem. Phasellus placerat est id mauris. Curabitur laoreet ante eu libero. Vestibulum aliquet nibh sit amet mi.

  • ac placerat felis massa vel neque
  • Maecenas tincidunt iaculis libero
  • Nunc malesuada pulvinar leo

Vivamus consequat. Sed id purus. Etiam hendrerit convallis risus. Proin orci libero, consectetuer sed, convallis non, hendrerit vitae, nisl. Vivamus imperdiet orci at lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id ante sit amet nulla volutpat placerat. Fusce interdum dignissim ante.

'Split Content' Block Example

Example of the content positioned right top on large screens and top of the block on small screens. Using background: None and Split Content Layout: 25/75: Top/Btm Left - Middle Right.

Example Image For Split Content block

Content positioned left bottom on large screens and bottom on small screens.

Example button

'Split Content' Block Example

Example of the content positioned right top on large screens and top of the block on small screens. Using background: Light and Split Content Layout: 75/25: Middle Left - Top/Btm Right and Vertical Alignment: top.

Example Image For Split Content block

Content positioned right bottom on large screens and bottom on small screens.

Example button

'Split Content' Block Example

Example of the content positioned right top on large screens and top of the block on small screens. Using background: None and Split Content Layout: 33/66: Top/Btm Left - Middle Right.

Example Image For Split Content block

Content positioned left bottom on large screens and bottom on small screens.

Example button

'Split Content' Block Example

Example of the content positioned right top on large screens and top of the block on small screens. Using background: Mid and Split Content Layout: 66/33: Middle Left - Top/Btm Right and Vertical Alignment: top.

Example Image For Split Content block

Content positioned right bottom on large screens and bottom on small screens.

Example button

'Split Content' Block Example

Example of the content positioned right top on large screens and top of the block on small screens. Using background: none and Split Content Layout: 50/50: Top/Btm Left - Middle Right.

Example Image For Split Content block

Content positioned left bottom on large screens and bottom on small screens.

Example button

'Split Content' Block Example

Example of the content positioned right top on large screens and top of the block on small screens. Using background: Dark and Split Content Layout: 50/50: Middle Left - Top/Btm Right and Vertical Alignment: top.

Example Image For 'Split Content' block

Content positioned right bottom on large screens and bottom on small screens.

Example button

General Content

Test of the 'General Content' block with an added background color. This is outside of the CTA and Callout options.