Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Featured Tile

The Featured Tile Component is a custom-built AARP module designed to streamline content presentation across various formats.

Editor to Copy/Paste
Training
Figma Design

Image on Top

A featured tile with the style option of 'image on top' selected.

Small Image in Left

A featured tile with the style option of 'small image in left' selected.

Small Image in Right

A featured tile with the style option of 'small image in right' selected.

Large Image in Left

A featured tile with the style option of 'large image in left' selected.

Large Image in Right

A featured tile with the style option of 'large image in right' selected.

Putting them together

In this example, you can combine different Featured Tile style options to create new layouts. This one has Image on Top, and a couple of Small Img on Right tiles to create a section for a landing page.

Training

This component enables authors to easily curate and display a dynamic list of content — including articles, videos, and other media types — within a single interface. It supports both manual selection and automated population based on taxonomy tags and the page’s publish date in the CMS. When taxonomy is consistently applied, newly published content is automatically added to the Featured List. One way to think of it is that the Featured List component creates Featured Tiles. 

Video Training

15:21

Authoring Capability:

  • Featured Tile Variations (Dropdown) - (Not used for the Reusable Foundation Template.)

  • Component Type -

    • Article - If the content to be presented is an article.

    • Video - If the content to be presented is a video.

  • URL -This is where you place the CMS path or article https URL (Please note: if you use the https URL the fields will not prefill with promotional information.)

  • Category (Prefills) - This content prefills with category or channel of the content.

  • Link to Category - You have the ability to link the category title to a category/channel page.

  • Title (Prefills) - This content prefills with the title of the article taken from the promotional tile field in the Content Fragment.

  • Get Title from linked page (Checkbox) - You have the option to uncheck the default and change the prefilled title to something else.

  • Description (Prefills) - This content prefills with the description of the article taken from the promotional description field in the Content Fragment.

  • Get description from linked page (Checkbox) - You have the option to uncheck the default and change the prefilled description to something else.

Article Date Details

  • Updated Date - This field prefills if there is an updated date present within the Content Fragment.

  • Get updated Date from linked page (Checkbox) - You have the option to uncheck the default and change the prefilled updated date to something else.

  • Published date (Prefilled) - This field prefills if there is an publish date present within the Content Fragment.

  • Image (Prefilled) - You have the option to uncheck the default and change the prefilled publish date to something else.

  • Get image from linked page (Checkbox) - You have the option to uncheck the default and change the prefilled publish date to something else.

Video Details

  • Video Time (Prefill) - This field prefills if there is a Video time present within the video details page.

  • Get image from linked page (Checkbox) - You have the option to uncheck the default and change the prefilled video time to something else.

  • Video Date (Prefill) - This field prefills if there is a Video Date present within the video details page.

  • Get video date from linked page (Checkbox) - You have the option to uncheck the default and change the prefilled video date to something else.

  • Internal Campaign Tracking Only (when applicable) - This is where the internal tracking code will go if this is a campaign that should be tracked together.

  • Analytics ID - This is the field that you will place the data-element-ID/code for click tracking.

  • Open in New Window (Checkbox) - If selected when a user click the link in the tile, a new tab will open.

  • Display Overlay message (Checkbox) - If selected an overlay message will appear before the user can go to the perspective page.

  • Overlay Message - This is the field that you should enter the overlay message. An example, of an overlay message is “You are now leaving AARP.”.

  • Members Only Banner (Dropdown) –

    • Inherit from page - It default to this option.

    • Forcefully Show - You can change it to forcefully show even though it is not on the page.

    • Hide - You also have the ability to hide the Members Only Banner even if it is present on the page. (This option is almost never used.)

  • Show Exclusive Text - This where you would enter exclusive text.

  • Button One - If you want an optional primary button present. This is where you would enter the title for the button.

  • Button URL - This is where the CMS path/URL for the button should be entered.

  • Button Analytics ID - This is the field that you will place the data-element-ID/code for click tracking.

  • Button One Internal Campaign ID - This is where the internal tracking code will go if this is a campaign that should be tracked together.

  • Button Two - If you want an optional secondary button present. This is where you would enter the title for the button.

  • Button Two URL - This is where the CMS path/URL for the button should be entered.

  • Button Two Analytics ID - This is the field that you will place the data-element-ID/code for click tracking.

  • Button Two Internal Campaign ID - This is where the internal tracking code will go if this is a campaign that should be tracked together.

  • ID - This is where your Component ID can go.

  • Settings From (Dropdown) -

    • Automatic - This is the default settings. based on the Component Type selected

    • Manual - This is allows an author to change the default settings and select their own.

    • Manual Field Settings

      • Category Type/Size (Dropdown) - This is where you can select the H value.

      • Show Category (Checkbox) - You have the option to or uncheck the show category and determine what displays.

      • Type/Size (Dropdown) -

      • Show Title (Checkbox) - You have the option to or uncheck the show title and determine what displays.

      • Show Description (Checkbox) - You have the option to or uncheck the show description and determine what displays.

      • Show Image (Checkbox) - You have the option to or uncheck the show Image and determine what displays.

      • Show Video Time (Checkbox) - You have the option to or uncheck the show Video Time and determine what displays.

      • Show Video Date (Checkbox) - You have the option to or uncheck the show Video Date and determine what displays.

      • Show Updated Date (Checkbox) - You have the option to or uncheck the show updated date and determine what displays.

      • Show Publish Date (Checkbox) - You have the option to or uncheck the show published date and determine what displays.

      • Show Updated/Publish Date (Checkbox) - You have the option to or uncheck the show updated/publish date and determine what displays.

  • Image Alternative Text field - This is where an author would enter the alt attribute for the image added to the component.   If an alt attribute is already associated with this image in the DAM, it will prefill. (Please note that if the field is prefilled, the only way to make changes is to go to the source, such as the DAM or DAH.)
  • Image Title field - This is where the image title would be entered by the author.  If there is an image title already associated with this image in the DAM, it will prefill. (Please note that if the field is prefilled, the only way to make changes is to go to the source, such as the DAM or DAH.)
  • Image Caption field - This is the field where an author would enter the image caption text.  If there is a caption already associated with this image in the DAM, it will prefill. (Please note that if the field is prefilled, the only way to make changes is to go to the source, such as the DAM or DAH.)