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 regular 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.
If you configure the card as a link, its appearance can have two states: Regular and Hover. Design the hover style to indicate that the card is clickable or define different content for the hover status that shows users additional information on the same card. When you enable both states for a card, the states buttons appear near the card on canvas to switch between them for further design. A Linked to button 
appears when you select the nested widgets. The button indicates whether the widget’s settings are isolated or synchronized across the states.
- 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 any 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 to the card so it opens 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://). 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.
- Regular—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.
Tip:
To experiment with these options, click Live view on the builder toolbar.