Hero Images, Carousels, and Above the Footer

There are three way the Hero CTA Combo can be used

With An Image   With A Video    With No Image Or Video   Portal Example

Goes in EDU + Portal: as hero under header (in Page Header sub-section) • page layouts from 2019 and new ones)
Similar to Page Header Image and the CTA Group, but it combines both. Differences: font-family is Oswald instead of Zilla Slab; does not include sub-title option; only 1 font-size; only 1-4 CTAs (not 5). Note: as the same as the CTA Group the characters < > do currently not show up. • class .hero-cta-combo
margin-bottom: none

Has options for:

  • Option to remove image overlay - A “Keep Overlay” dropdown is under “Hero Image” choice for the Image only
    • Default = Yes
  • H1 can be left empty
    • For the new Templates to be published soon - when left emtpy, the heading from the page title (or Heading 1) input appears as the heading on the page.
  • Optional text inputs are now above and below the heading 1
    • Make sure to not put too many lines of text. They can get cut off at Tablet size or mobile.
  • Image Or Video are option for the Hero
    • They can also be left empty
    • When left empty, a green bar appears behind the CTAs (see below).
    • Hero H1 input will not appear if no image is chosen. H1 is only for on top of image.
      • Note: Hero H1 input should be left blank in order for Heading 1 input within the page to display.
  • 4th CTA has an optional Anchor Link.
    • The other CTAs can be skipped to fill out the CTA 4 and the colors will always be in order (Babson Green, Courtyard Green, Summer Nights, Peacock Blue Dark).

Instructions to add anchor tag ID (to the location on the page that needs to be scrolled to):

  • If linking to a Form Assembly Form (by itself without it being inside a Form Assembly Wrapper) add form-assembly-container to the anchor link input in CTA 4.
  • If linking to a Form Assembly Wrapper add babson__registration-form to the anchor link input in CTA 4.
  • If the desired anchor location is not a form, a general content block or a code content type can be added above the location with this code placed in the Tools / <> Source Code area <div id=”anchorTag”></div>
Hero CTA Combo image

 

hero-cta-combo-video
 

 

No Title or Image Added

 
Hero CTA Combo default

Goes in: .edu as hero under header
To place on page: Carousel Content Type needs to be placed in main content area. Then add Content Card content types (which become the slider images) in Carousel Slides sub-section.
class .carousel--wrapper
margin-bottom: none

homepage slider image map 960px
 
homepage slider image map 1300px
Carousel Slider

Goes in: EDU + Portal as hero under header (in Page Header sub-section)
Page layouts 2 Column - 2019 and new page layouts (2 Column PL, Simple PL, Full Width PL)
Margin-bottom: none

Options:

  • Can be placed with the CTA Group (also in the Page Header) sub-section
Page Header Image

Goes in: EDU + Portal as hero (in Page Header child section) or in main content area
Place as hero: place Video Hero Content Type in Page Header sub-section.
Place on page: place Video Hero Content Type in main content area.
Margin-bottom: none
Note: Trick is to crop video

 
 
 
Video Hero

Older content type that is mainly placed in Inner 2 Column and Inner 3 Column page layouts within the Main Content area.
Goes in:
 EDU or Portal as hero in main content area
Note: if switching a page layout to a new PL page layout the Section Header content types will need to be moved into a sub-section called Page Header. Or, the image could be replaced with a Page Header Image within a Page Header sub-section
margin-bottom: none 

Section Header

Goes in: .edu in main content area on Inner 2 Column and Inner 3 Column page layouts.
Can be placed with new PL page layouts within main content area.
margin-bottom: 2rem

 
 
 
Section Header - Carousel

Goes in: .edu as hero under header
Place as hero: place in Page Header sub-section
Page Layouts: 2 Column - 2019 and new page layouts (2 Column PL, Simple PL, Full Width PL)
margin-bottom: none

Note: do not add iframe as hero

Capital Markets Hero Block
CTA Group Footer

Goes in: .edu above footer in Page Footer child  section
Page Layouts: 2 Column - 2019 and new page layouts (2 Column PL, Simple PL, Full Width PL)
margin-bottom: none

Juicer

Goes in .edu: abover footer in Page Footer sub-section

Registration Form

Goes in: .edu Homepage + Portal Homepage only
margin-bottom: 0 (no margin-bottom options)
See below map of where image will not be covered by arrow or text
Jira Ticket: ITCMS-3024 Style: Content Card: break away content layout html/main-homepage-hero-item into own CT

homepage slider image map 1300px

 

homepage slider image map 960px

homepage slider

 

Also part of homepage slider - hero-item-thumb

homepage slider thumb