New Webpart - Icon Story Card Rotator

Icon Story Card Rotator

On March 4th, Tyler Technology released 4 new Webparts. The first is our icon story card rotator webpart, which creates a carousel of cards that the user can scroll through. 

Note: For best results, use this web part on Full-Width layout pages. Other layouts may work in a limited capacity but are not supported.

Click here to see an example.

List Settings

A list is required in addition to the web part to define its content. The list must contain the following columns:

Required Fields:

• Title (Single Line of Text): The header text of card.
• Description (Single or Multiple Lines of Text): The text content of the card.
• Icon Type (Single Line of Text or Hyperlink): Uses FontAwesome (Add anchor link) classes to display an icon.
• Button Url (Single Line of Text or Hyperlink): The link that will be used for the call-to-action button.
• Button Text (Single Line of Text): The text contained in the call-to-action button.

Display Options

Colors can be defined as hex values or web-safe color names. Note that any color selections must meet WCAG standards, requiring a contrast ratio of at least 4.5:1.

• Background Color: The background color of the carousel that contains the cards
• Button Background Color: The background color of the call-to-action button.
• Button Text Color: The color of the text in the call-to-action button.

Font Awesome

Icons are pulled from FontAwesome.  https://fontawesome.com/v5/icons?t=categories

To add an icon, first find one you like from the various categories. By clicking on them you will see a list of corresponding icons

Once you see an icon you like, click on it and a popup window will appear. If the class starts with "fas" and the version tag on the bottom says 5, you will be able to use it. The string you want to use would be the one that begins with "fa-..."

In this case the icon field value in the list would be "fa-desktop". The license with the state allows usage of free and pro icons up to version 5.