New Webpart - CTA Card Flipping Grid

CTA Card Flipping Grid

On March 4th, Tyler Technology released 4 new Webparts. The 3rd is our card flipping grid webpart which creates a series of animated cards that flip, revealing the content on the reverse side.

Click here to see an example.

Note: For best results, use this web part on pages without navigation or asides. Other layouts may work in a limited capacity but are not supported.

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 which will show on both sides of the card. Recommended maximum length: 55 characters
• Description (Single or Multiple Lines of Text): The content to be displayed on the back side of the card. Recommended maximum length: 375 characters
• Image URL (Single Line of Text or Hyperlink): The URL for the image to be displayed on the front of the card
• Image Alt: Text description of the image for accessibility

Optional Fields

• Button Url (Single Line of Text or Hyperlink): The link that will be used for the call-to-action link.
• Button Text (Single Line of Text): The text used for the call-to-action link. Recommended maximum length: 30 characters

Display Options

The background and text color of the back side of the card can be adjusted in the 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.

• Back side background color: Sets the background color of the flipped card
• Back side text color: Sets the color of the text on the flipped card
• Number of cards per row: Sets the number of cards before creating a new row.