Rectangle Tile

The Rectangle tile offers the designer the opportunity to create and build custom action buttons or "quick links". 

A "button" or link does not always stand out as an important item within a page. It must stand out and imply that there is an action to be taken when clicking the tile. Giving the tile defining features, and providing movement and interaction, speaks to the viewer and enhances the experience. Follow the guide below to learn more about the custom capability of the Rectangle tile 

Style and Behavior Options

The Rectangle tile has six setting tabs. This guide will focus on specific features of the tabs. For full setting capability, check out our Tile Settings article

How to Create a Call to Action Button

Step 1
Adjust the settings in the General tab.

• Choose your height. 120 is great for a Call to Action Button!
• Set a Highlight on Mouse Over color, which will immediately help your page visitors to know that the button is clickable. It can also be a red flag to be reviewed or can serve as a simple reminder of internal resources. 

Step 2

Decide if you need text on your Call to Action button. Text labels let visitors know what they can expect when interacting with this action click.
Not all Call to Action buttons need text - up to you!

Step 3

Image

Display an image or icon on your Call to Action button. Link an image from your SharePoint lists or upload an image from your desktop. Save it into your SharePoint site contents directly from the tile. 

Step One
Navigate to the Image tab in the settings and click the magnifying glass to open your Site Contents

Step two
Browse through your site contents OR click the + at the top left and upload an image from your file directory 

Note: After you have selected your image you have the option to choose its layout style. In most cases, Fit will be the best choice for image display

Links

If the button click is intended to open a SharePoint list/library, click the magnifying glass to browse through your site contents and select the SP list/library.
If the button click opens to an external source, enter the link in the Path field.
Once your link is selected, choose the link display style.  
The sample below is a request form in a Slider display. The goal of setting display to modal/slider is to complete tasks without leaving the current page.

For full description of display style, review our Modal Windows and Sliders article 

Tile Behavior

Select which devices this button will appear on
Best Practice Tip: consider the content and action, if required, of the tile.
Will it perform successfully on a mobile device? Will this touch screen format transfer well onto a desktop?

Advanced

Tile Visibility Select which groups can/cannot view the tile content.  
Group categories selectable via dropdown: Everyone, Only for, For everyone except.
When Only for or For everyone except is selected, groups from the selected category will appear from the dropdown menu

Best Practices