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>

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

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

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

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 

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

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

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

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

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