Card widget

The Card widget provides a flexible and extensible content container in which you can display various bits of related information. Its content can comprise different widgets, such as text, images, buttons, and a map. Select from several predefined card templates or choose a blank template to design your own. You can set a link for the card to be clickable and you can configure different styles for its default and hover states.

Examples

Use this widget to support app design requirements such as the following:

• You want to gather related information about a single subject into one coherent piece of content, such as summarizing item details for an ArcGIS map or feature service.
• You want to group concise calls to action, such as showcasing a group of data or products for your audience to find what they need and click cards for easy access.
• You want to display a visual summary for a place with brief text and an image or map that users can click to explore more details in another page or section of your app.

Usage notes

When you add a Card widget, first choose a template design, and click Start. On the canvas, select the widgets nested in the card to modify its content and layout, or add more by dragging widgets from the Insert panel into the card. All widgets are supported in the Card widget.

Tip:

If the nested widgets fill the container, you can open the configuration settings for the Card widget by selecting it in the Outline pane.

A Card widget can have two states: Default and Hover. The hover state appears when the user hovers over the card. Hover states are useful for indicating that cards are clickable, and for including additional information. When you enable both states for a card, states buttons appear near the card on the canvas. You can use these buttons to switch between editing the two states. A Linked to button appears when you select a nested widget. The button indicates whether the widget’s settings are isolated or synchronized across the two states. If you click Linked to, additional options appear that allow you to apply the widget's settings in one state to another state or isolate the widget's settings in that state.

• For synchronized widgets, the widget content and style settings (background, border, and shadow) are the same, and the size and positions can be different across states.
• For isolated widgets, you can configure properties without affecting other widgets in another state.
• To use the same widget in another state or synchronize the widget’s size and position as well, select the widget and apply it to the target state.
• When you delete a synchronized widget, the same widget in different states is also deleted unless you isolate the widget first.

Settings

The Card widget includes the following settings:

• Select a template—Choose from predefined card designs or start with an empty card template. (If you choose a template, you can customize its appearance later.)
• Set link—Add a link on the card to go to other content, such as a web address, or a section view, window, or page in your app. If you link to a web address, type a URL (that begins with https://). In addition to a web address, you can use the URL option to set a link to go to an email address, phone number, and more. You can choose whether the link opens in the same window as the app, the top window, or a new window.
• States—Provide a visual representation to communicate the status of the card using different colors, styles, and content. For both states, you can style all sides of the border at the same time or style each of them separately.
  • Default—The default state of the card without user interaction. You can set background, border, and box shadow styles for this state.
  • Hover—The state initiated by the user when they point to a card. This state is optional. When the hover state is turned on, you can isolate the design (including the widget layout and content). You can set background, border, box shadow, and animated transition styles for this state.
    • Layout—Choose a mode for designing the hover state layout.
      • Auto—The settings of any nested widgets are synced across the default and hover states. If you choose this mode, you can only configure settings for nested widgets when you are editing the Default state on the canvas. This mode is appropriate if you only want to change the card's content settings, such as background and border settings, between the default and hover states.
      • Custom—Create a separate layout for the card's hover state. If you choose this mode, you can manually arrange and configure widgets while editing both states. Any widgets that you add to one state's layout do not automatically appear for the other state, but you can use the Linked to button to sync widgets between both states.