Banners

This page will provide examples of the banner options available for use within the site.

Components shown on this page include: 

FullHeaderImage

In This Section

Full Header Image Rendering Example

View Live Example

Rendering Item Path: /sitecore/layout/Renderings/Methodist/FullHeaderImage

Status: Active

Description: Banner with options for one, two or three images, titles, subtitles, text and optional CTA buttons and move image right setting

Component Variation

Full Header Image Variation Rendering Example

Component Specifications

  • PlayButton Type Field Type: Dropdown
    Selection Options: Dark Icon, Light Icon
  • Title 1 Field Type: Single line text
  • Title 2 Field Type: Single line text
  • Description 1 Field Type: Multiple line text
  • Description 2 Field Type: Multiple line text
  • Image 1 Field Type: Image
  • Image 2 Field Type: Image
  • Link Field Type: Single line text
  • Link 2 Field Type: Single line text
  • Description 3 Field Type: Multiple line text
  • Description 4 Field Type: Single line text
  • CSSClass Field Type: Single line text
  • WithLineBelow Field Type: Checkbox
  • LinkTitle1 Field Type: Single line text
  • LinkTitle2 Field Type: Single line text
  • H2Red Field Type: Checkbox
  • Title3 Field Type: Single line text
  • Image3 Field Type: Image
  • Link3 Field Type: Single line text
  • MoveImageRight Field Type: Checkbox
  • BlueHeadingDescription Field Type: Checkbox
  • Header3 Field Type: Single line text
  • Anchor Name Field Type: Single line text

ServiceBanner

Service Banner Rendering Example

View Live Example

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Components/Banners/ServiceBanner

Status: Active

Description: Banner with full width background or image, video and CTA button. Options to align image use gradient and specify font color.

Component Variations

Service Banner Variation Rendering Example

Service Banner Second Variation Rendering Example

Component Specifications

  • Video Link Field Type: Single line text
  • Auto Resize Video Field Type: Checkbox
  • Image Field Type: Image
  • Mobile Image Field Type: Image
  • Description Field Type: Multiple line text
  • Font Color Field Type: Dropdown
    Selection Options: Black, Blue, White
  • Button Label Field Type: Single line text
  • Button Link Field Type: Link
  • Theme Field Type: Dropdown
    Selection Values: Centennial, Flyout, Flyout Pushdown
  • Alignment Field Type: Dropdown
    Selection Values: Center, Left, Right
  • Display Gradient Field Type: Checkbox

CarouselBanner

Carousel Banner Rendering Example

View Live Example

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Components/Banners/CarouselBanner

Status: Active

Description: Full-width carousel banner with background image and text

Component Variation

Carousel Banner Variation Rendering Example

Component Specifications

  • Name Field Type: Single line text
  • Items Field Type: Multiple Items (see below)
  • Show Pagination Field Type: Checkbox
  • Use Infinite Loop Field Type: Checkbox
  • Slide Transition Style [shared] Field Type: Dropdown
    Selection Options: Fade, Slide
  • Show Navigation Arrows Field Type: Checkbox
  • Desktop Height Field Type: Single line text
  • Mobile Height Field Type: Single line text
  • Auto-Play Enabled [shared] Field Type: Checkbox
  • Pause on Hover [shared] Field Type: Checkbox
  • Interval (seconds) [shared] Field Type: Dropdown
    Selection Options: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
  • Transition Speed (milliseconds) [shared] Field Type: Dropdown
    Selection Options: 50ms, 100ms, 150ms, 200ms, 250ms, 300ms, 350ms, 400ms, 500ms, 750ms, 1s
  • Swipe Sensitivity - % of viewport to be swiped in order to transition to next slide (lower === more sensitive) Field Type: Dropdown
    Selection Options: 10, 20, 30, 40

Items

  • Alignment Field Type: Dropdown
    Selection Options: Center, Left, Right
  • Gradient Background Field Type: Dropdown
    Selection Options: Light Blue Bottom to Top, Light Blue Left to Right, Light Blue Right to Left, Light Blue Top to Bottom
  • Color Theme Field Type: Dropdown
    Selection Options: Blue, Dark Blue, White
  • Background Color Field Type: Dropdown
    Selection Options: Alice Blue 1, Alice Blue 2, Blue, Blue Gray, Cultured, Dark Blue, Ghost White, Light Black, Light Blue, Mulberry, White
  • Custom Background Field Type: Single line text
  • Button Label Field Type: Single line text
  • Desktop Image Field Type: Image
  • Button Mobile Label Field Type: Single line text
  • Button Link Field Type: Link
  • Mobile Image Field Type: Image
  • Tablet Image Field Type: Image
  • Title Tag Field Type: Dropdown
    Selection Options: DIV, H1, H2, H3, H4
  • Title Field Type: Single line text
  • Mobile Title Field Type: Single line text
  • Description Field Type: Multiple line text
  • Mobile Description Field Type: Multiple line text

HeaderBanner

Header Banner Rendering Example

View Live Example

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Components/Banners/HeaderBanner

Status: Active

Description: Header banner with full-width background or image. Ability to overlay other renderings, for example Quote and TileList

Component Specifications

  • Image Field Type: Image
  • Mobile Image Field Type: Image

TimelineBanner

Timeline Banner Rendering Example

View Live Example

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Centennial/Timeline Banner

Status: Active

Description: Tall banner with box gradient, can be placed in bottom or top, left or right, title and text block overlay with link option.

Component Variation

Component Specifications

  • Links Field Type: Multiple Links (see below)
  • Position Desktop Field Type: Dropdown
    Selection Options: Bottom Left, Bottom Right, Top Left, Top Right
  • Position Mobile Field Type: Dropdown
    Selection Options: Bottom Left, Bottom Right, Top Left, Top Right

Link

  • Label Field Type: Single line text
  • Link Field Type: Link
  • Site Field Type: Dropdown
    Selection Options: Careers, Global Arabic, Global Chinese, Global English, Global Spanish, Research and Education, www

StaticCarousel

Static Carousel Rendering Example

No Live Example Available

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Components/Sliders/Static Carousel

Status: Active only on testing page

Description: Carousel banner with images and overlay with pagination and arrow controls.

Component Specifications

  • Items Field Type: Multiple Items (see below)
  • Layout Field Type: Dropdown
    Selection Options: Horizontal, Vertical
  • Enable Overlay on Carousel? Field Type: Checkbox
  • Margin Above (px) Field Type: Single line text
  • Margin Below (px) Field Type: Single line text
  • Theme Field Type: Single Theme (see below)

Items

  • Title Field Type: Single line text
  • Title Tag Field Type: Dropdown
    Selection Options: H1, H2, H3
  • Title Glyph Field Type: Single Glyph (see below)
  • SubTitle Field Type: Single line text
  • SubTitle Tag Field Type: Dropdown
    Selection Options: H2, H3
  • Teaser Field Type: Multiple line text
  • Link Field Type: Link
  • Image Field Type: Image

Theme

  • Foreground Color Field Type: Single line text
  • Background Color Field Type: Single line text
  • Title Font Size Field Type: Single line text
  • Title Font Weight Field Type: Dropdown
    Selection Options: 300, 400, 500, 600, 700
  • Title Font Line Height Field Type: Single line text
  • SubTitle Font Size Field Type: Single line text
  • SubTitle Font Weight Field Type: Dropdown
    Selection Options: 300, 400, 500, 600, 700
  • SubTitle Font Line Height Field Type: Single line text
  • Teaser Font Size Field Type: Single line text
  • Teaser Font Weight Field Type: Dropdown
    Selection Options: 300, 400, 500, 600, 700
  • Teaser Font Line Height Field Type: Single line text
  • Next Glyph Field Type: Single Glyph (see below)
  • Previous Glyph Field Type: Single Glyph (see below)

Glyph

  • Value Field Type: Single line text

CentralizedLocationBanner

Centralized Location Banner Rendering Example

No Live Example Available

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Locations/Components/Banners/CentralizedLocationBanner

Status: Active

Description: Tall banner with background image, title, and text

Component Specifications

  • Banner Image Field Type: Image
  • Mobile Banner Image Field Type: Image
  • Hero Title Field Type: Single line text
  • Hero Description Field Type: Single line text

HeroBanner

Hero Banner Rendering Example

View Live Example

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Components/Banners/HeroBanner

Status: Active

Description: Carousel banner with vertical pagination, background image, title, text and ghost CTA button.

Component Specifications

  • Title - (H1) Field Type: Single line text
  • Description Field Type: Multiple line text
  • Ambient Video Link Field Type: Single line text
  • Playable Video Link Field Type: Single line text
  • Desktop Playable Video Background Field Type: Image
  • Mobile Playable Video Background Field Type: Image
  • Images Field Type: Multiple Images (see below)
  • Link Field Type: Link
  • Styles Field Type: Dropdown
    Selection Options: White, White - hover, Blue, Blue - hover, Black, Black - hover, Menu bar, Menu bar - hover, Menu bar - mobile, Menu bar override, Menu bar override - hover, Menu bar override – hover
  • Hover Styles Field Type: Dropdown
    Selection Options: White, White - hover, Blue, Blue - hover, Black, Black - hover, Menu bar, Menu bar - hover, Menu bar - mobile, Menu bar override, Menu bar override - hover, Menu bar override – hover

Images

  • Title - (H1) Field Type: Single line text
  • Image Field Type: Image
  • Mobile Image Field Type: Image

SplitBanner

Split Banner Rendering Example 

 No Live Example Available 

Rendering Item Path: /sitecore/layout/Renderings/Methodist/Components/Banners/SplitBanner

Status: Active

Description: Split banner with 3 images and 2/3, 1/3 split. Stacked images in 1/3 side with overlay text.

Component Specifications

  • Name Field Type: Single line text
  • Main Item Field Type: Multiple Main Items (see below)
  • Split Alignment Field Type: Dropdown
    Selection Options: Left, Right
  • Split Items Field Type: Multiple Split Items (see below)

Main Item

  • Alignment Field Type: Dropdown
    Selection Options: Center, Left, Right
  • Gradient Background Field Type: Dropdown
    Selection Options: Light Blue Bottom to Top, Light Blue Left to Right, Light Blue Right to Left, Light Blue Top to Bottom
  • Color Theme Field Type: Dropdown
    Selection Options: Blue, Dark Blue, White
  • Background Color Field Type: Dropdown
    Selection Options: Alice Blue 1, Alice Blue 2, Blue, Bright Gray, Cultured, Dark Blue, Ghost White, Light Black, Light Blue, Mulberry, White
  • Custom Background Field Type: Single line text
  • Desktop Image Field Type: Image
  • Mobile Image Field Type: Image
  • Tablet Image Field Type: Image
  • Title Tag Field Type: Dropdown
    Selection Options: DIV, H1, H2, H3, H4
  • Title Field Type: Single line text
  • Mobile Title Field Type: Single line text
  • Description Field Type: Multiple line text
  • Mobile Description Field Type: Multiple line text

Split Item

  • Alignment Field Type: Dropdown
    Selection Options: Center, Left, Right
  • Gradient Background Field Type: Dropdown
    Selection Options: Light Blue Bottom to Top, Light Blue Left to Right, Light Blue Right to Left, Light Blue Top to Bottom
  • Color Theme Field Type: Dropdown
    Selection Options: Blue, Dark Blue, White
  • Background Color Field Type: Dropdown
    Selection Options: Alice Blue 1, Alice Blue 2, Blue, Bright Gray, Cultured, Dark Blue, Ghost White, Light Black, Light Blue, Mulberry, White
  • Custom Background Field Type: Single line text
  • Desktop Image Field Type: Image
  • Link Field Type: Link
  • Display Item as Link Field Type: Checkbox
  • Mobile Image Field Type: Image
  • Tablet Image Field Type: Image
  • Title Tag Field Type: Dropdown
    Selection Options: DIV, H1, H2, H3, H4
  • Title Field Type: Single line text
  • Mobile Title Field Type: Single line text
  • Description Field Type: Multiple line text
  • Mobile Description Field Type: Multiple line text