Display apps, data, and web maps

Using the following cards, site editors and edit group members can display a variety of content directly on their sites and pages, including dashboards, story maps, documents, and even other sites and pages:

• Gallery card—Display a mix of different items, including content from your site catalog, public or organizational content that is not shared to your site's catalog, other sites, and pages. This card is mobile responsive, meaning content will display correctly on any size of device.
• Category card—Classify datasets and other content types by category (a pre-filtered search of your site catalog by groups, tags, or categories). Choose an icon to represent each category you create.
• Map card—Display a web map or web scene on your site. Using row card settings, you can adjust its display to span the entirety of your site or display it next to other content at a fixed width.
• Application card—Displays a supported ArcGIS application, such as web apps, dashboards, Insights pages, Experience Builder web apps, and storymaps.

Note:

Displaying content on a site or page does not automatically add the item or items to the site's content catalog. When using the Gallery, Map, and Application card, you must also add the item to your site's content catalog if you want it to be discoverable in your site's search results. For more information, refer to Add existing content.

Common items displayed on sites and pages include dashboards, stories, and web maps. These items are created and managed in ArcGIS Online. When populating a card with content, you can choose from your own content or content that's been shared with your groups, your organization, or the public.

Display a gallery of content

Use the gallery card to display up to16 items with the item's thumbnail and summary. Visitors can open an item in a gallery by selecting the item's card. You can use groups, your site's content catalog, or individual items to populate the gallery.

To display a gallery of content, complete the following steps:

1. Open a site or page in edit mode.
2. On the Customize panel, select Layout.
3. Drag a Gallery card onto a row in the layout.

   Note:

   By default, the gallery displays items shared to your site's content catalog. You can continue using it as a source of content for the gallery. You can also add groups using the Dynamic option or select individual items with the Manual option.

4. Under the Content menu, choose one of the following options:
   • Dynamic—Displays items belonging to selected groups. Choose which types of items from this group are shown using the Content type(s) menu. You can also refine which items display by using the Sharing level, tags, or categories assigned to them. These categories are different from Category cards.

     Tip:

     A dynamic gallery will automatically update when the site's content catalog is updated. For example, if you add your site's edit group, any new content created or updated by group members will automatically appear in the gallery.

   • Manual—Displays specific items that you select, regardless of the group to which they belong. With a manual display, you can reorder your cards in the layout by adjusting the list of cards in the side panel.

     Tip:

     Manually choosing which items to display on your site does not automatically add the item to the site's content catalog.

5. Optionally, you can sort which items are displayed based on usage, dates, and titles.
6. Under Appearance, choose how the card displays with the following options:
   • Title heading—Choose a heading size for the card title.
   • Image—Choose thumbnails or icons. For more information on editing thumbnails, see Item details.
   • Corners—Choose square or rounded corners.
   • Drop shadow—Choose none or a level of shadow.
   • Include buttons—Optionally, add a button for people to select to open the card's item.

     Tip:

     You can opt to not include buttons to streamline the design of your gallery.

7. Under Options, choose how your gallery cards display with the following settings:
   • Open in...—Open the card in the same or a new tab.
   • Enable sharing—Allow site users to share a link to the Gallery card.
   • Button always visible—The share button always shows at the bottom of the card; otherwise it only appears when the visitor's cursor hovers on the card.
For examples, see Create a gallery of content using ArcGIS Hub.

Display categories of data

Use icons to represent related content, such as Hydrology to represent datasets, web maps, and applications that have either been assigned related tags or organized into groups.

To display categories of data, complete the following steps:

1. Open a site or page in edit mode.
2. On the Customize panel, select Layout.
3. Drag a Category card onto a row in the layout.
4. Under the Data menu, choose one of the following options:
   • Tag query—Enter a tag query. All datasets with this tag on their respective ArcGIS Online item will be returned in search results.
   • Category query—Identify Categories that your organization has established. For more information on creating categories, see Categorize content.
   • Group—Select a group. All datasets in this group will be returned in the search results.
5. Edit the link text for your category.
6. To represent your category with an icon from the library:
   1. Select Choose from library and select Pick an icon.
   2. Choose an icon and choose Select.
   3. Select the box to the right of the icon to change the color.
7. To use your own icon:
   1. Select Provide URL for your own and enter the URL.
   2. Provide Alt text for the icon to help non-sighted users and improve your site’s accessibility.

   Note:

   Custom icons should be saved as a .svg or transparent .png file. Icons will be scaled to fit 120x120 pixels.

8. Select Save.

Display a map

Use the Map card to display a web map or web (3D) scene directly on the site or page.

Note:

If you're currently using an Iframe card to embed a web map or web scene, consider using the Map card instead, as it is easier to configure and is more performant.

To display a map, complete the following steps:

1. Open a site or page in edit mode.
2. On the Customize panel, select Layout.
3. Drag a Map card onto a row in the layout.
4. Choose Select map.
5. Find a map by searching or using filters, select a map, and select Save.
6. To display a title, select the toggle button for Title, edit as needed, and choose alignment.
7. Set a Height value (in pixels).
8. Select Enable map legend, if needed.
9. Select Hide on mobile if you don't have a mobile version of the application.

   f you have a version of the item that's better suited for mobile devices, you can add the item under the Mobile option and use the Default option for the original item.

10. Select the toggle buttons for Enable sharing, and Button always visible, if needed.

Display an application

Use the Application card to display an item directly on the site or page. The following items are supported:

• Apps—applications, forms (Survey123), and web mapping applications
• Documents—PDF, Microsoft Excel, Microsoft PowerPoint, iWork Keynote, iWork Pages, iWork documents, and Visio documents
• Datasets
• Dashboards
• Sites and pages

To display an application, complete the following steps:

1. Open a site or page in edit mode.
2. On the Customize panel, select Layout.
3. Drag an Application card onto a row in the layout.
4. Choose Select application.
5. Find an application by searching or using filters, select an application, and select Save.
6. Set a Height value (in pixels).
7. Enable scrolling by turning on Auto.

   Tip:

   Scrolling is not always suitable on mobile devices as a user may be unable to pass over the application. Ensure that a scrollable iframe works on a mobile device before applying your changes.

8. Select Hide on mobile if you don't have a mobile version of the application.

   f you have a version of the item that is more suitable for mobile devices, you can add the item under the Mobile option and use the Default option for the original item.

9. Select the toggle buttons for Enable sharing and Button always visible, if needed.