This is the Sub-Title

This is the Header

This is the Sub-header

This is the body

This is the caption

This is the Sub-Title

This is the Header

This is the Sub-header

This is the body

This is the caption

2-Across Layout Block 

The 2-Across Layout block can be used to place 2 blocks side-by-side. You can add two blocks of the same kind or mix and match certain blocks together to achieve different looks. 

 

Episerver Required Blocks

  • 2-Across Layout 
  • Blocks to go in each of the 2 slots in the layout block 

 

Add To

  • The main content area on any content page
  • A padding container
  • A tabs section 
  • An accordion section 

 

Blocks allowed in layout containers
  • Detail card
  • Formatted promo
  • Full overlay
  • Image content carousel
  • Image or video 
  • Menu item
  • Static map
  • Team member
  • WYSIWYG Editor

 

 

Examples

Full Overlay + Full Overlay

The block shown below demonstrates a 2-acoss layout block with a full overlay block on either side. 

This is the sub-title

This is the header

This is the sub-header

This is the body

This is the caption

This is the sub-title

This is the header

This is the sub-header

This is the body

This is the caption

This is the Sub-Title

This is the Header

This is the Sub-header

This is the body

This is the caption

This is the Sub-Title

This is the Header

This is the Sub-header

This is the body

This is the caption

Full Overlay + Image

The blocks shown below demonstrates a 2-acoss layout block with an image and a full overlay on either side.

This is the Sub-Title

This is the Header

This is the Sub-header

This is the body

This is the caption

This is the Sub-Title

This is the Header

This is the Sub-header

This is the body

This is the caption

Full Overlay + Video

The blocks shown below demonstrates a 2-acoss layout block with a video and a full overlay on either side.

This is the sub-title

This is the header

This is the sub-header

This is the body

This is the caption

Full Overlay + Image Carousel

The blocks shown below demonstrates a 2-acoss layout block with an image carousel and a full overlay on either side.

This is the Sub-Title

This is the Header

This is the Sub-header

This is the body

This is the caption

Full Overlay + Detail Card

The block shown below demonstrates a 2-acoss layout block with a full overlay block and a detail card on either side.

This is the sub-title

This is the header.

This is the sub-header.

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. Duis aute irure dolor.

_Template Visible Text
This is the caption.

This is the sub-header.

This is the header.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

_Template Visible Text

Image + Image

The blocks shown below demonstrates a 2-acoss layout block with an image on either side.

Image + Wyziwyg

The blocks shown below demonstrates a 2-acoss layout block with an image and a wyziwyg editor block on either side.

HISTORY, PURPOSE AND USAGE

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

_Template Visible Text

Wyziwyg + Wyziwyg

The blocks shown below demonstrates a 2-acoss layout block with a Wyziwyg Editor Block on either side.

HISTORY, PURPOSE AND USAGE

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

_Template Visible Text

HISTORY, PURPOSE AND USAGE

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

Detail Card + Detail Card

The blocks shown below demonstrates a 2-acoss layout block with a detail card on either side.

This is the sub-header.

This is the header.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

_Template Visible Text

This is the sub-header.

This is the header.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

_Template Visible Text

Contact Person + Contact Person

The blocks shown below demonstrates a 2-acoss layout block with a contact person block on either side. 

Formatted Promo + Formatted Promo (Vertical)

The blocks shown below demonstrates a 2-acoss layout block with a formatted promo on either side. This example demonstrates this layout block combo when both formatted promos are configured with the vertical alignment option.

This is the Header

This is the caption.

This is the body.

This is the Header

This is the caption.

This is the body.

Formatted Promo + Formatted Promo (Horizontal)

The blocks shown below demonstrates a 2-acoss layout block with a formatted promo on either side. The example below demonstrates this layout block combo when both formatted promos are configured with the horizontal alignment option.

This is the Header

This is the caption.

This is the body.

This is the Header

This is the caption.

This is the body.