Tile Card List

Tile Card List Overview

The Tile Card List is a component that allows you to group existing tile cards together to display in a row and allow for a title and global link option to also be configured into the component.

Example Tile Card List (Text Style)

The Tile Card List consists of four elements to modify:

  1. Tile Card List Title
  2. Tiles to be added to the Tile Card List
  3. Tile Card List Style
  4. Global Link

NOTE: To create a Tile Card List, the Tile Cards need to already be created. Please see the Tile Card Instructions page for this step.

Create and Edit Tile Card Component

See the Tile Card Instructions page for creating and editing individual Tile Card Components.
You can create the Tile Card List once the tile cards have been created.

Access the Tile Card List Folder

  • Navigate to the Tile Card List Folder from Content > Agency Name Here > Content modules > Tile Card List Folder from the Content Tree. If it does not exist, then insert one by right-clicking on the Content modules item and selecting the Tile Card List Folder.

OR

  • Navigate to the _resources folder under the page you want to insert a Tile Card List. If it does not exist, then insert one by right-clicking on the _resources item and selecting the Tile Card List Folder.

Create the Tile Card List Component

  1. Right-click on the Tile Card List Folder item.
  2. Insert the Tile Card List option.


  3. Name the Tile Card List title.


  4. The Tile Card List will appear.


  5. Scroll to the Data section in the Content Area.


  6. Title: Enter a title for the component. This appears above the Tile Cards.


  7. Tiles: Scroll to the Tiles field

a. Navigate to the Tile Cards you wish to select using the Content Tree in the All column.
b. Double-click on the Tile Cards you want to have show up on the Tile Card List component.
c. Double-click on any Tile Card components within the Selected column to remove them from the component.
d. Use the up and down arrows to the right of the Selected column to sort them in the order you wish to display them.

  1. Link: Scroll to the Link field.

a. Select the ‘Insert link’ to link to a page within Sitecore.
b. Select ‘Insert media link’ to link to a document file within Sitecore.
c. Select the ‘Insert external link’ to link to an off-site website.
d. Enter the title in the ‘Description’ field.

  1. Select the Save icon (top left in the Content Editor Ribbon).
  2. Publish the item when ready.

Insert the Tile Card List Component on the Page

  1. From the Experience Editor, insert a sublayout on the page.
  2. Select the sublayout container you want to use.

The following sublayouts are available:

  1. Full-Width (optimal)
  2. 9-3 sublayout
  3. 8-4 sublayout
  4. 6-6 sublayout
  5. 3-9 sublayout
  6. 4-8 sublayout
  7. Dynamic Grid

Note: Refer to the specific placeholder document for details on each sublayout use.

  1. Select the Tile Card List tab, then the Tile Card List component.
  2. Select the appropriate Tile Card List item and select OK.

TIP: It is easier to create and populate the needed components in the Content Editor first before adding them to the page in the Experience Editor.
  1. Select the Save icon (top left in the Content Editor Ribbon).
  2. Preview the Page.
  3. Publish the item when ready.

Edit the Tile Card List Component

  1. From the Experience Editor, click on the Tile Card List component and access the toolbar. Select the Control Properties option.
  2. Scroll to the TileCardList Params Data section.
  3. ListType: Select the styling for the component.

a. TileWithIcon: Tile Card List with Icon
b. TileWithWhiteBG: Tile Card List with Text
c. SimpleTileWithoutBG: Tile Card List with Call To Action Link

  1. TileCountToDisplay: Enter the number of tiles to appear with the component.

a. You can display however many tile cards you selected in the Tile Card List.

  1. Select the Save icon (top left in the Experience Editor Ribbon).
  2. Preview the Page.
  3. Publish the item when ready.

Tile Card List Component Examples

Tile Card List example 4 tiles with a sublayout background applied

Tile Card List example 3 tiles with no sublayout background applied


Tile Card List example 6 tiles with no sublayout background applied