Flex Spotlight components / Tridion Showcase

Flex Spotlight component
Flex Spotlight component

Flex Spotlights components feature the following fields:
1. Name: enter a name for your component here. (This field does not display anywhere on your website, but is used to organize files within Tridion.)
2. Schema: select Flex Spotlight
3. Headline (optional): enter a title that will display on the Flex Spotlight (if a link is added to one of the link fields below, the title will become a link)
4. Image (optional): select an image for your content by clicking the browse folder icon and navigating to the image you want to use.
5. Rich text copy: add a brief text description to your flex spotlight. This is rich-text field, so you can add bullets, links, and such, but we don't recommend adding too much because this content should be short.
6. Component link to destination page: this is for linking to a page within the same website. Use the browse folder icon to navigate to a component included in the page you wish to link to, and select that component.
7. If not linking to a component, link to destination URL: this is for linking to another website or a page on a different website. Enter the URL in this field. When a user clicks on this link, it will open the link in a new tab.
8. Which do you want to display first, the image or the headline?: what is selected in this field only applies to the Flex Spotlight (H2 or H3) component templates. You can select if you want the image to display at the top, or the headline.
When you've completed all the fields, Save and Close the component.

Flex Spotlight (with H2 or H3 Heading)
Flex Spotlight (with H2 or H3 Heading)

Below are examples of what Flex Spotlights (with H2 Heading) and Flex Spotlights (with H3 Heading) look like. You can also see an interactive example of the page pictured below.

Create This Feature Sample Page

Usually we recommend creating Spotlights that all have the same appearance. However, for the sake of demonstration, below we show different types of spotlights to give you an idea of what is available to you.

In order from left to right are: a flex spotlight that links to a page within the same website, a flex spotlight that links to an external website, a flex spotlight with an image (on top), and a flex spotlight with an image under the headline. The top row of spotlights use the Flex Spotlights (with H2 Heading) component template, which uses a slightly larger font for the spotlight headlines. The bottom row of spotlights use the Flex Spotlights (with H3 Heading) component template, which uses a slightly smaller font for the spotlight headlines.

To create a Flex Spotlight (with H2 or H3 Heading), complete the following fields:
- Headline (#3): enter a headline for your content
- Image (#4): (optional) click the browse folder icon , navigate to the image you wish to use in your spotlight, and select it.
- Rich text copy (#5): add a brief text description to your flex spotlight. This is rich-text field, so you can add bullets, links, and such, but we don't recommend adding too much because this content should be very short.
- Component link to destination page (#6): click the browse folder icon , navigate to a component that is included in the page you want to link to, and select it.
- If not linking to a component, enter a destination URL (#7): if the page you want to link to is on a different website, enter the URL in this field.
- Which do you want to display first, the image or the headline? (#8): select either 'image' or 'headline' from the drop-down menu, to choose which should display first in the flex spotlight.
Save and Close the component.

Home Page - Row 1, 2, 3 (antiquated)

Flex Rotator - Default Dark
Flex Rotator - Default Dark

The Flex Rotator - Default Dark component template creates a rotating image carousel on the page. You can add a title and brief description to each rotator. Pictured below is what a Flex Rotator - Default Dark looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.
Flex Rotator - Default Light
Flex Rotator - Default Light

The Flex Rotator - Default Light component template creates a rotating image carousel on the page. You can add a title and brief description to each rotator. Pictured below is what a Flex Rotator - Default Light looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.
Flex Rotator - Overlay Dark
Flex Rotator - Overlay Dark

The Flex Rotator - Overlay Dark component template creates a rotating image carousel on the page. You can add a title and brief description to each rotator. Pictured below is what a Flex Rotator - Overlay Dark looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.
Flex Rotator - Overlay Light
Flex Rotator - Overlay Light

The Flex Rotator - Overlay Light component template creates a rotating image carousel on the page. You can add a title and brief description to each rotator. Pictured below is what a Flex Rotator - Overlay Light looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.
Flex Rotator - Side Dark
Flex Rotator - Side Dark

The Flex Rotator - Side Dark component template creates a rotating image carousel on the page. You can add a title and brief description to each rotator. Pictured below is what a Flex Rotator - Side Dark looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.
Flex Rotator - Side Light
Flex Rotator - Side Light

The Flex Rotator - Side Light component template creates a rotating image carousel on the page. You can add a title and brief description to each rotator. Pictured below is what a Flex Rotator - Side Light looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.
Jumbo Flex Rotator
Jumbo Flex Rotator

The Jumbo Flex Rotator component template creates a rotating image carousel at the top of the page, under the navigation bar. You can add a title and brief description to each rotator. Pictured below is what a Jumbo Flex Rotator looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.
Jumbo Flex Rotator - Branded
Jumbo Flex Rotator - Branded

The Jumbo Flex Rotator - Branded component template creates a rotating image carousel at the top of the page, under the navigation bar. You can add a title and brief description to each rotator. Pictured below is what a Jumbo Flex Rotator - Branded looks like.

Create This Feature Sample Page

To create this, complete the following fields in a Flex Spotlight component:
- Headline (#3) - (optional) enter the headline that will display on your rotator.
- Image (#4) - select the image that will appear in your rotator.
- Rich text copy (#5) - (optional) enter a brief description that will display on your rotator.
- Component link to destination page (#6) - (optional) if linking to a page within your website, select a component included in the published page you want to link to.
- If not linking... destination URL (#7) - (optional) if linking to another website, or page on another website, enter the URL in this field.
Save and Close the component.