Tile Card

Tile Card Overview

The Tile Card is a component that allows you to create a box which includes a title, description, and call-to-action link. You can also add an image within the Tile Card by modifying the view.

The Tile Card consists of four elements to modify:

Title
Short Description
Image
CTA Link

Each Tile Card has four views (variants) to choose from:

Original
New Design
Icon
Text

Access the Tile Card Folder

There are two ways you can access the Tile Card Folder. You can access it on a website level within the Content Modules folder or on a page level within the _resources folder.

Navigate to the Tile Card Folder within the Content Modules folder from Content > Agency Name Here > Content Modules > Tile Card Folder from the Content Tree.

Navigate to the Tile Card Folder within the _resources folder from Content > Agency Name Here > Home > Page > _resources from the Content Tree.

If there is no Tile Card Folder, right-click on the _resources and choose Insert > Tile Card.

Insert the Tile Card Folder option.
Name the Tile Card Folder title.

Create the Tile Card Component

Right-click on the Tile Card Folder and choose Insert > Tile Card.
Insert the Tile Card option.
Name the Tile Card title.
Scroll to the Data section in the Content Area.
Title: Enter a Title for the component.
Short Description: Enter a Short Description for the component.
Image: Add an image for the event through the Media Library.

a. Select the Content Tree. Select the Image. Click Select.

Select the Tile Card CTA link.

a. Select the ‘Insert link’ to link to a page in Sitecore.
b. Select ‘Insert media link’ to link to a document file in Sitecore.
c. Select the ‘Insert external link’ to link to an off-site website.

For internal Sitecore links, select the page you want to link to. Enter the CTA title in the ‘Description’ field.

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

Insert the Tile Card Component on the Page

From the Experience Editor, insert a sublayout on the page.
Select the sublayout container you want to insert the Tile Card component into.

a. This component is available on following sublayouts:
i. Full-Width
ii. 9-3 sublayout
iii. 8-4 sublayout
iv. 6-6 sublayout
v. 4-4-4 sublayout
vi. 3-3-3-3 sublayout
vii. 3-9 sublayout
viii. 4-8 sublayout
ix. Dynamic Grid

Select the sublayout you just inserted, then select the Add here button to see what components are available to add.

TIP: It is easier to create and populate the components you want to use in the Content Editor first before adding them to the page in the Experience Editor.

Select the Tile Card tab, then the Tile Card component.
Select the Select button.
Select the appropriate Tile Card item and select OK.

NOTE: This example shows a Tile Card under the Tile Card Folder found under the Content Modules folder where Tile Cards can be created to share on other pages.

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

Change the Tile Card View

From the Experience Editor, select the Tile Card component, then select the Display Properties icon from the toolbar.
Scroll to the Tile Card Params Data section. You can change the styling on the Tile Card by selecting the Style drop down menu.

You can select the following options:
i. Original
ii. New Design
iii. Icon
iv. Text

You can apply a white background by checking the box next to Apply White Background.
Select OK once you’ve made the appropriate styling for the Tile Card.
Select the Save icon (top left in the Content Editor Ribbon).
Preview the Page.
Publish the item when ready.