Layout Examples

Paragaph with “intro” style applied, for optional, larger intro type copy. Should only be a few lines long, and let the reader know what they’re about to get into.

Example paragraph text style. This is what your standard paragraphs will look like throughout the entire site. Certain areas may have special styles, but this is your standard copy size. Paragraph links are styled like this so that they are easy for users to find. You also have the ability to BOLD text as well as emphasize text. You can also insert links to download things in your content, ‘Example Document Title’ (PDF), like this.

Below this paragraph you’ll find examples of all the other styles you’ll have at your disposal. You also have a technical page that lists all important information on image sizes, fonts, and colors.

H1 – Hero, with dark video background

Paragraph with “intro” class assigned. This text provides a short description of page content, and looks best if you’re able to write 2-3 sentences worth of copy.

CTA Button

H1 – Small Hero, with light image texture background

Paragraph with “intro” class assigned. This text provides a short description of page content, and looks best if you write 2-3 sentences.

CTA Button

H2 – Two-Column Layout, text with sidebar (white bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the image.

H4 – Optional Header:

  • Checkbox List
  • Apply “checkbox” class to the ul tag
  • Checkbox List

H2 – Two-Column Layout, text with sidebar (light gray bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the image.

H4 – Optional Header:

  • Checkbox List
  • Apply “checkbox” class to the ul tag
  • Checkbox List

Eyebrow – Optional Header

H2 – Two-Column, Image & Text (white bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the image.

  • Checkbox List
  • Apply “checkbox” class to the ul tag
  • Checkbox List

CTA Button

Eyebrow – Optional Header

H2 – Two-Column, Image & Text (light gray bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the image.

  • Checkbox List
  • Apply “checkbox” class to the ul tag
  • Checkbox List

CTA Button

Eyebrow – Optional Header

H2 – Two-Column, Image & Text (reversed, white bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the image.

  • Checkbox List
  • Apply “checkbox” class to the ul tag
  • Checkbox List

CTA Button

Eyebrow – Optional Header

H2 – Two-Column, Image & Text (reversed, light gray bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the image.

  • Checkbox List
  • Apply “checkbox” class to the ul tag
  • Checkbox List

CTA Button

Eyebrow – Optional Header

H2 – Two-Column, Text & Video (white bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the video.

H4 – Optional Header

  • Apply “checkbox” class to the ul tag
  • Checkbox List

CTA Button

Eyebrow – Optional Header

H2 – Two-Column, Text & Video (light gray bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Also, this section will look best if this text box is shorter than the video.

H4 – Optional Header

  • Apply “checkbox” class to the ul tag
  • Checkbox List

CTA Button

Eyebrow – Optional Header

H2 – One-Column, Centered Text, with 2 Large Cards (white bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 - Two-Column, Large Cards (using blurb tool)

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long.

Text Link

H3 - Two-Column, Large Cards (using blurb tool)

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long.

Text Link

Eyebrow – Optional Header

H2 – One-Column, Centered Text, with 2 Large Cards (light gray bg)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 - Two-Column, Large Cards (using blurb tool)

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long.

Text Link

H3 - Two-Column, Large Cards (using blurb tool)

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long.

Text Link

Eyebrow – Optional Header

H2 – Alternate One-Column, Centered Text, with 2 Large Blurbs (white bg)

This section is very similar to the section above, however, the blurbs below are not wrapped in cards. Just an additional option. Ideally, you’ll write in approx 2-3 sentences of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 - Header Info (Blurb Module)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Text Link

H3 - Header Info (Blurb Module)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Text Link

Eyebrow – Optional Header

H2 – Alternate One-Column, Centered Text, with 2 Large Blurbs (light gray bg)

This section is very similar to the section above, however, the blurbs below are not wrapped in cards. Just an additional option. Ideally, you’ll write in approx 2-3 sentences of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 - Header Info (Blurb Module)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Text Link

H3 - Header Info (Blurb Module)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Text Link

H2 – Narrow Two-Column, text with image (white bg)

This is paragraph text, and this little blurb looks best if you’re able to write 2-3 sentences worth of copy here. Basically, you want the height of this text to be less than this image.

CTA Button

H2 – Narrow Two-Column, text with image (white bg)

This is paragraph text, and this little blurb looks best if you’re able to write 2-3 sentences worth of copy here. Basically, you want the height of this text to be less than this image.

CTA Button

H2 – One-Column, Centered Text, followed by 3-Columns of blurbs (white bg)

H3 - Blurb Module

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long. This module is not meant to click through anywhere, this is strictly informational.

H3 - Blurb Module

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long. This module is not meant to click through anywhere, this is strictly informational.

H3 - Blurb Module

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long. This module is not meant to click through anywhere, this is strictly informational.

H2 – One-Column, Centered Text, followed by 3-Columns of blurbs (light gray bg)

H3 - Blurb Module

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long. This module is not meant to click through anywhere, this is strictly informational.

H3 - Blurb Module

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long. This module is not meant to click through anywhere, this is strictly informational.

H3 - Blurb Module

This block/section is ideal for any place where you need to promote something in a large can’t-miss way. Ideally, this text should be 2-3 sentences long. This module is not meant to click through anywhere, this is strictly informational.

H2 – Centered One-Column of Text (light bg with image/texture)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CTA Button

Text Link

H2 – Alternate Centered One-Column of Text (light bg with image/texture)

This is regular paragraph text. Ideally, you’ll write in approx 2-3 sentences of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CTA Button

Text Link

“Testimonials are a huge opportunity to add social proof to your website and gain more trust from your visitors. Here are some great tips on how to write and obtain persuasive testimonials.”

Firstname Lastname

Title / Company
City, State

“Testimonials are a huge opportunity to add social proof to your website and gain more trust from your visitors. Here are some great tips on how to write and obtain persuasive testimonials.”

Firstname Lastname

Title / Company
City, State

H2 – One-Column Centered Text, with Three-Column Stat Block (max 3 stats, white bg)

Transplant Programs

Countries

Patient at a Time

H2 – One-Column Centered Text, with Three-Column Stat Block (max 3 stats, light gray bg)

Transplant Programs

Countries

Patient at a Time

H2 – Edge-to-edge 50/50, image and text (white bg)

This is a very impactful section, but be mindful of the photography you select. The focal point should be located near the center of the 1800×1200 image to avoid any weird cropping.

H4 – Option Header:

  • Checkbox List
  • Apply “checkbox” class to the ul tag

CTA Button

H2 – Edge-to-edge 50/50, image and text (light gray bg)

This is a very impactful section, but be mindful of the photography you select. The focal point should be located near the center of the 1800×1200 image to avoid any weird cropping.

H4 – Option Header:

  • Checkbox List
  • Apply “checkbox” class to the ul tag

CTA Button

H2 – Edge-to-edge 50/50, image and text (white bg)

This is a very impactful section, but be mindful of the photography you select. The focal point should be located near the center of the 1800×1200 image to avoid any weird cropping.

H4 – Option Header:

  • Checkbox List
  • Apply “checkbox” class to the ul tag

CTA Button

H2 – Edge-to-edge 50/50, image and text (white bg)

This is a very impactful section, but be mindful of the photography you select. The focal point should be located near the center of the 1800×1200 image to avoid any weird cropping.

H4 – Option Header:

  • Checkbox List
  • Apply “checkbox” class to the ul tag

CTA Button

H2 – Transitional block (for Footer CTA)

this section transitions from light gray bg color to the white bg color you see in the footer. Please be mindful to choose your sections accordingly so that this section always follows a section with light gray bg.

CTA Button Reverse

H2 – Transitional block (for Footer CTA)

this section transitions from light gray bg color to the white bg color you see in the footer. Please be mindful to choose your sections accordingly so that this section always follows a section with light gray bg.

CTA Button Reverse