Specific Layouts and Examples

As an extension to the standard components, our team has developed some additional brand styles.

How to Trigger Layouts

These can be triggered by adding classes to specfic areas of our components as listed below.

When To Use These Styles

All of these layouts can be used on any of our AEM webpages. Although, some layouts will requre a full width section to be placed to function properly.

Marketing and Brand Strategy

Tucker Telecommunications Center,
245 Troup Ave.
419-372-2616
marketing@bgsu.edu

Header

Split-screen component set as "Image | Content" that overlays a text component along the right side of an image. This image will resize to the length of the text content. 

Disclaimer: When selecting an image for this layout, be mindful where the copy will overlay and be sure the subject will not be covered.

How to Trigger Split Screen Header Layout

How to Trigger Split Screen Header Layout

header
  1. Place a Split Screen component into a full-width section of the page
  2. Make sure the component is set as "Image | Content"
  3. Select the "Classes" tab from the dialog box and enter "header" in the Additional Classes field
  4. Add Text component to the Split Screen and add content
Graduate Admissions 2022

Example Headline

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.

Call to Action

Peek Right (Image)

A component "peeks out" from the right side while hugging the right edge of the page and adding rounded corners to the left side of the components. This layout can be used on images and background areas.

How to Trigger Image Peek Right

How to Trigger Image Peek Right

peek-right
  1. Place a Midbar component into a full-width section of the page
  2. Within the Midbar, add a Column Control component and set the number of columns to two.
  3. In the right column, input an Image Component
  4. Select the "Classes" tab from the Image dialog box and enter "peek-right" in the Additional Classes field

To vertically center align content within the columns:

align-items-center
  1. Double click to open the Column Control dialog box
  2. Select the "Classes" tab from the dialog box and enter "align-items-center" in the Additional Classes field

Image Peek Right

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.

BGSU Letters Drone

Peek Right (Background Area)

A component "peeks out" from the right side while hugging the right edge of the page and adding rounded corners to the left side of the components. This layout can be used on images and background areas.

How to Trigger Background Area Peek Right

How to Trigger Peek Right

peek-right
  1. Place a Midbar component into a full-width section of the page
  2. Within the Midbar, add a Column Control component and set the number of columns to two.
  3. In the right column, input a Background Area Component
  4. Select the "Classes" tab from the Image dialog box and enter "peek-right" in the Additional Classes field

To vertically center align content within the columns:

align-items-center
  1. Double click to open the Column Control dialog box
  2. Select the "Classes" tab from the dialog box and enter "align-items-center" in the Additional Classes field

Background Area Peek Right

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.

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.

Peek Left (Image)

A component "peeks out" from the left side while hugging the left edge of the page and adding rounded corners to the right side of the components. This layout can be used on images and background areas.

How to Trigger Image Peek Left

How to Trigger Image Peek Right

peek-right
  1. Place a Midbar component into a full-width section of the page
  2. Within the Midbar, add a Column Control component and set the number of columns to two.
  3. In the left column, input an Image Component
  4. Select the "Classes" tab from the Image dialog box and enter "peek-left" in the Additional Classes field

To vertically center align content within the columns:

align-items-center
  1. Double click to open the Column Control dialog box
  2. Select the "Classes" tab from the dialog box and enter "align-items-center" in the Additional Classes field
BGSU Letters Drone

Image Peek Left

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.

Peek Left (Background Area)

A component "peeks out" from the left side while hugging the left edge of the page and adding rounded corners to the right side of the components. This layout can be used on images and background areas.

How to Trigger Background Area Peek Left

How to Trigger Background Area Peek Right

peek-right
  1. Place a Midbar component into a full-width section of the page
  2. Within the Midbar, add a Column Control component and set the number of columns to two.
  3. In the left column, input a Background Area Component
  4. Select the "Classes" tab from the Background Are dialog box and enter "peek-left" in the Additional Classes field

To vertically center align content within the columns:

align-items-center
  1. Double click to open the Column Control dialog box
  2. Select the "Classes" tab from the dialog box and enter "align-items-center" in the Additional Classes field

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.

Background Area Peek Left

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.

splitOverlay

Reconfigure the Split Screen component to be center aligned with its content.

How to Trigger splitOverlay

How to Trigger splitOverlay

splitOverlay
  1. Place a Split Screen component into a full-width section of the page
  2. Add media in the image or video tab or the component
  3. Select the "Classes" tab and enter "splitOverlay" in the Additional Classes field

To give the text content a white background and rounded corners

card
  1. Add a text component into the Split Screen content section
  2. Select the "Classes" tab and input "card" in the Additional Classes field
  3. Optional: if the card holds only one link within it, add an additional class of "linked" to the text component
    See more about card brand standards

    card linked
  4. Optional: if the content could use more padding around the text, add an additional class of "p-5" next to "card" in the text component

    card p-5
Dron University Hall 2022

splitOveraly

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. This is a link.

Updated: 05/25/2023 04:25PM