Diagnostic
Module [501] Featured Item – Item with List of Links
This module features item such as a software component or a capability of the product or service. An image is displayed at the top followed by a title and description. Optionally, the module may have links and a see all link.
It is common to have multiple featured items grouped under a common row heading & description. In this case, each of the featured items are created first as a module 501. They are then nested into another component where the overall title for the row is added.
Schema fields used:
- Title or header (supports 'Text or HTML block'; font size 24px)
- Tagline (supports 'Text or HTML block')
- Description (supports 'Text or HTML block'; RTF enabled)
- Image (supports 'Image')
- Featured Item (supports 'Video Externally Hosted'; is recognized by the system to include a play button over the thumbnail and play it in an overlay when the play button clicked)
- List of Links (supports 'External Link', 'Internal Link' and 'Video - Externally Hosted' components; optionally icons displayed if configured as part of the link)
- See all link (optional; appears as call to action; supports 'External link' and 'Video - Externally Hosted')
Attributes
- Image Alignment: Left (Default), Center, Right
- Text Alignment: Left (Default), Center, Right
- Background color
- Text Effects: Expand/Collapse (timing TBD)
- For Responsive:
- Hide Image on Mobile Devices
- Molecule Size: Responsive Collapse Mobile Content
Additional Fields
- Highlight Label (generic field).
- Field Value: Value may be supplied in either ‘Field Content component link’ or ‘Field Contents text’ field in component.
Note: For the [501], the editor can opt to place multiple modules as children in a [800] to have a white boxed effect and align to a common height. See examples below where attributes "Background Color - White (for child module)" & "Dynamic common alignment of child modules" applied to the parent [800].
Main variations of module [501]:
![Title/Header Component - Optional [501] - Tagline Component - Optional [501]](/us/en/images/FPO__5B501_5D_308_x_220_tcm245_1825482_tcm245_1719088_tcm245-1825482.png)
Title/Header Component - Optional [501]
Description component. Variation contains:
Attributes: default (image left; text left; no collapse; no background color)
- This is a simple link in a list
- This is a link with an icon in a list
- This is a link with an External Site icon that should wrap in 2 lines and the icon displayed at the end of the text
- External Link w/ type
- External Link w/ type & overwrite
- Internal Link (Gated)
- Internal Link (Ungated)
- Video title shown in overlay and displayed above the video
![Title/Header Component - Optional [501]](/us/en/images/FPO_501_120_x_128_tcm245_1825492_tcm245_1825496_tcm245-1825492.png)
Title/Header Component - Optional [501]
Description component. Variation contains:
Attributes: Image Alignment - Center
![Title/Header Component - Optional [501]](/us/en/images/FPO__5B501_5D_308_x_220_tcm245_1825482_tcm245_1825498_tcm245-1825482.png)
Title/Header Component - Optional [501]
Description component. Variation contains:
![Title/Header Component - Optional [501] - Tagline Component - Optional [501]](/us/en/images/FPO__5B501_5D_308_x_220_tcm245_1825482_tcm245_1846765_tcm245-1825482.png)
![Title/Header Component - Optional [501]](/us/en/images/FPO_501_120_x_128_tcm245_1825492_tcm245_1846766_tcm245-1825492.png)
Title/Header Component - Optional [501]
Description component. Variation contains:
Attributes: Responsive : Responsive: Collapse Mobile Content; Image Alignment Center
![Title/Header Component - Optional [501]](/us/en/images/FPO_501_120_x_128_tcm245_1825492_tcm245_1880964_tcm245-1825492.png)
Title/Header Component - Optional [501]Highlight Label
Description component. Variation contains:
- Simple image (not leveraged from a linked video; recommended image size for components: 319 x 220)
- Title
- Description (for this descriptive text)
- Attributes: Responsive : Responsive: Collapse Mobile Content; Image Alignment Center
- Additional Fields: Highlight Label
Other Variations:
![Title/Header Component - Optional [501]](/us/en/images/Image_4_tcm245_1721897_tcm245_1725239_tcm245-1721897.jpg){kind=small}
Title/Header Component - Optional [501]
• Title
• Description
Attributes: image - center; insert padding around the module;
Attribute for parent: background Color - White (for child module); child width - 33%
Page Configuration row attributes: background color - Blue
Title/Header Component - Optional [501]
• Title
• Description
Attributes: image - center; insert padding around the module;
Attribute for parent: background Color - White (for child module); child width - 33%
Page Configuration row attributes: background color - Blue
Title/Header Component - Optional [501]
• Title
• Description
Attributes: image - center; insert padding around the module;
Attribute for parent: background Color - White (for child module); child width - 33%
Page Configuration row attributes: background color - Blue
Title/Header Component - Optional [501]
Example contains 2 x [501] modules embedded as cells in a Generic Table.
On the LEFT side a [501] containing:
• This description
• List of links
Attributes:
- text left (default);
- Molecule size: Spacing: Remove default spacing - top & Spacing: Remove default spacing - bottom
• Call to action
Attributes: text left (default); Secondary Typography
Title/Header Component - Optional [501]
• Description
Attributes for parent:
- child width - 33%;
- molecule height: dynamic common alignment of child modules
Title/Header Component - Optional [501]
• Description
Attributes for parent:
- child width - 33%;
- molecule height: dynamic common alignment of child modules
Page Configuration row attributes: Background Color: Grey
![Title/Header Component - Optional [501]](/us/en/images/Image_25__28221_x_159_29_tcm245_1920797_tcm245_1719215_tcm245-1920797.png)
![Title/Header Component - Optional [501]](/us/en/images/Image_25__28221_x_159_29_tcm245_1920796_tcm245_1827532_tcm245-1920796.png)
True Learning
Personalizing content to meet individual needs, helping students develop high-level cognitive skills and creating richer educational experiences both in and outside the classroom.
Title/Header Component - Optional [501]
Description component. Variation contains:
Attributes: Hide Image on Mobile Devices
Title/Header Component - Optional [501]
Description component. Variation contains:
Attributes: Responsive : Responsive: Collapse Mobile Content; Image Alignment Center
Report product content issues