Modules

[302] Spotlight CTA – Full row CTA with Image beside text

This module will typically showcase a large graphic with a primary CTA. This is a side by side layout where the text and CTA is on one side and the graphic on the other. In addition, this module may be used to feature an image, a video, include a CTA, etc.

Schema fields used:

Title or Header (supports 'Text or HTML Block'; H3; font size 32px)
Tagline (supports 'Text or HTML Block')
Description (supports 'Text or HTML Block'; RTF enabled)
Image (supports 'Image'; default image size if not specified in image metadata 470 x 402; default player size for module if not specified 513 x 289)
Featured Item (supports 'Video - Externally Hosted'; if duration is provided as part of the video definition, it will appear above the Call to action)
List of links (supports 'External Link', 'Internal Link', 'Video - Externally Hosted')
See all link (supports 'External Link', 'Internal Link', 'Video - Externally Hosted')

Attributes:

Image Placement: Left of Copy (default); Right of copy
Text Alignment: Left (default), Center, Right
Image Alignment: Middle, Bottom, Top (to be used for vertical alignment)
Optional Links: Clickable Header
Video Properties: Override Video Thumbnail for Embedded Videos
Text Effects: Smaller Font for Title
Link Images: Non-clickable Images
For Responsive:
Molecule Size: Responsive: Collapse Mobile Content
Hide image on mobile devices

Additional Fields:

Image Caption (generic Field).
Field Value: Value may be supplied in either ‘Field Content component link’ or ‘Field Contents text’ field in component. If a caption is desired either for the image or the video, it can be provided and will be displayed below.
See all link Short Title (generic field).
Field Value: Value may be supplied in either ‘Field Content component link’ or ‘Field Contents text’ field in component. When a value is provided in this generic field, this value is used for the see all link (CTA) label. It overrides any title that may be picked up from the linked component.
Highlight Label (generic field).
Field Value: Value may be supplied in either ‘Field Content component link’ or ‘Field Contents text’ field in component.

Note:
Video in overlay: An image may be provided in the Flex v2.0 – Generic Module schema or Video - Externally Hosted schema. If the image is provided in this field, it will take precedence over the image in video externally hosted.
Embedded video: By default, the video thumbnail (from the source video) is shown and any image provided here in Flex v2.0 Generic module or in Video – Externally Hosted is ignored. Editors may override this default view using an attribute (see above)

ENTERPRISE example - see here

Main variations of module [302]:

Title/Header component [302]

Tagline component

Example contains:

• Title

• Description (this descriptive text)

• Tagline

• Image (not used as video thumbnail)

• List of links (an external link with styling, a video)

• See All link (primary)

See All link

This is a simple link with styling
.type 123 MB
Video title
Video title
Beginning of dialog content
Video description
Close
M:SS video detail
External Link w/ type & overwrite
Internal Link (Ungated)
PDF 1409KB
Internal Link (Gated)
PDF 434KB

Title/Header component [302]

Example contains:

Title (which is clickable as consequence of applying attribute "Clickable Header" as described below)
Description (this descriptive text)
Image (not used as video thumbnail)
Featured item (video in overlay)
See All link
Attributes: Image Placement -Image Placement: Right of Copy; Optional Links - Clickable Header
Additional Fields: Image Description (caption or tooltip)

M:SS video detail

External Link w/ type & overwrite

M:SS video detail

Image Description (caption or tooltip)

Tagline component

Example contains:

• Featured item (video embed)

• Tagline

• Description (this descriptive text)

• See All link (primary)

• Attributes: Video Properties > Video Properties: Override Video Thumbnail for Embedded Videos

M:SS video detail

See All link

Title/Header component [302]^{Highlight Label}

Example contains:

Title
Description (this descriptive text)
Image (not used as video thumbnail; default placement)
See All link (with arrow treatment)
Attributes: Font Size: Smaller Font Size for Title; Image: Hide on Mobile Devices; Text: Collapse on Mobile Devices; Link Images: Non-clickable Images; Effect: Add Border around Module; Padding: Insert Padding around Module
Additional Fields: Highlight Label

See All link

Tagline component

Example contains:

• Featured item (video embed)

• Tagline

• Description (this descriptive text)

• See All link (primary)

• Attributes: Video Properties - Video Properties: Override Video Thumbnail for Embedded Videos; Image Placement -Image Placement: Right of Copy

• Row Attributes : Background Color Grey (type28)

M:SS video detail

External Link w/ type & overwrite

Title/Header component [302]

Example contains: Title, Description (this descriptive text), and as Featured Item a SlideShare component.

The SlideShare component contains its own Title, Description, Image (for thumbnail), Video or Presentation ID, and Player set to Slideshare - Single Presentation Player. Configured to display in overlay

Title/Header component [302]

Tagline component

Example contains: Title, Description (this descriptive text), Tagline, List of links, See All link

Attributes: Text Alignment - Right

Page Configuration: Cell Width 40%, Cell Offset Content - 15 Tab Stop, Row Background Image

See All link

Video title
Video title
Beginning of dialog content
Video description
Close
M:SS video detail

Other Variations:

Title/Header component [302]

Tagline component

Example contains:

Image (default placement)
Title
Tagline
Description
See all link
Attributes: Smaller Font for Title; Image Alignment: Middle; Image Alignment: Center; Insert Padding around the module; Link Images: Non-clickable Images

Attributes for parent: Background Color: White (for child module); Molecule Height : Dynamic Common Alignment of child modules; Child width: 50%

Page Configuration: row attributes Background Color: Blue

PDF 434KB

Internal Link (Gated)

Title/Header component [302]^{Highlight Label}

Example contains:

Image
Title
Description
Attributes: Image Alignment: Right; Image Alignment: Top; Image Placement: Right of copy; Insert Padding around module
Additional Fields: Highlight Label

Attributes for parent: Background Color: White (for child module); Molecule Height : Dynamic Common Alignment of child modules; Child width: 50%

Page Configuration: row attributes Background Color: Blue

M:SS video detail

Video title

HP Designjet T1200 HD Multifunction Printer

Image gallery

Title/Header component

These are 3 modules in this section:

1/ image to the left with image gallery (module [928] with nested [825])

2/ this text (module [302])

3/ the text below with bold headlines (module [302])
In the module schemas the attributes 'remove default spacing' are used to get optimized space
Page configuration:

* cell width: 50%

* all modules are linked into same row

title to link to pdf (text component)

Headline 1
e.g. hyperlink text .......

Headline 2
e.g. hyperlink text .....

all the above (starting withe headline) is 'rich text block'

Multiple examples with different video options

Example contains various settings for both BrightCove and YouTube videos as set in the Video Externally Hosted components. For YouTube videos, the related section that by default is shown at the end of the video, can be hidden by adding to the Video url the parameter: "?rel=0"