Skip to main content

Create Custom Image Cards in ArcGIS Hub

Dive into the world of ArcGIS Hub customization as we explore the potential of its widgets! Beyond the standard display of thumbnail images and item icons from your ArcGIS applications, this blog will guide you through customizing and elevating your Hub pages. If you're eager to infuse a personal touch into your gallery cards, from tweaking thumbnail images to adjusting buttons and background colours, you're in the right place. Join me in this blog as I walk you through the steps to craft custom cards that mimic the gallery card but with a flair of individuality. Let's unlock the possibilities of customization together!

Efficient image hosting platforms for your ArcGIS Hub pages.

First, you will need a reliable source to store and maintain the images you would like to showcase on your custom card. You can consider a couple of options for hosting your images online. The two platforms below are the most popular —and dare I say, the best — platforms to host your public images.

ArcGIS Online

  • Part of the ArcGIS ecosystem
  • Can upload files up to 500 GB
  • Easy to obtain public permanent image URL, which can be used on ArcGIS Hub and other online platforms


  • Can upload files up to 2 GB for GitHub Free account
  • Easy to obtain public permanent image
  • Can create multiple repositories
  • Some image compression

Whether you use ArcGIS Online or GitHub, you’ll be able to access the public image URL, which can be found on the bottom right of the item page in ArcGIS Online.

Screenshot of public image item URL on ArcGIS Online

Create custom cards on ArcGIS Hub using the public image URL and HTML

Accessing the HTML interface

Once you have your public image URL handy, follow the steps below to access the HTML of your card:

  1. Click on Layout.
  2. Drag and drop the “Row” configuration onto the page.
  3. Drag and drop the “Text” widget into the Row.
  4. In the Text widget, click on the Insert (+) sign and click on “Cards”. The widget will now be populated with three cards with the default images.

Option to choose “Cards” in the Text Widget

  1. Click on “</> Edit in HTML” button located on the bottom of the widget.

Congratulations! You've successfully entered the HTML interface of the Text widget, opening the door to your customization journey!

HTML interface of the Text Widget’s Cards configuration

Replacing the default image

One of the first lines you will want to change is the link to the image of your choice. Simply replace the URL next to src = with the public URL of your image. You can locate this code on lines 5, 28 and 51 on the default HTML. You may also change the image’s alternative information located on the same line of code.

HTML code block that brings in images from ArcGIS online. Line 5 is highlighted to show the readers where the image source code is located.

Save your changes to the HTML code block by clicking Apply on the top right corner. You will see that your custom cards have updated with the new image!

Changing the Captions and card description

You may also want to change the captions and description to match the context of your images. For the captions, change lines 7, 30 and 53 to the desired text:

HTML code block that codes for the caption of the image. Line 7 is highlighted to show the readers where the caption code is located.

For the description, change text on lines 14, 37, and 60 between <p slot="subtitle"> and </p>:

HTML code block that codes for the description of the image. Line 14 is highlighted to show the readers where the description code is located.

To lock in your changes, click Apply at the top right corner.

Linking the card to your item

After exiting the HTML window,  within the text widget, you will see two buttons: Details and View. Click on one of the buttons, and then click on the “Link” option at the top of the widget:

An image showing the two step process of connecting a link to a button. Next to the button is the number 1, indicating that the button must be selected first. The link option has number 2 written next to it, indicating that the link option must be selected second.

Add the link name and destination of your choice. 

The add link interface. It has spaces to write the link name and link destination.

Click on “Add Link” to make the change.

Changing the button style and placement

Interested in altering the number of buttons on the card(s) or changing their style? You can easily customize the buttons to your liking by entering the HTML.

On line 16 and 17, you’ll find code lines indicating the buttons. The default names of the buttons are “Detail” and “View”, but feel free to personalize these names to your preference. Please keep in mind that the character length of the button names can impact the appearance of the buttons.

HTML code block that allows button customization. Portion of line 16 and 17 are highlighted to show the readers where the button texts are located.

If you would like to delete one button, simply delete one of the lines (either 16 or 17) and change the width parameter from “half” to “full”.

HTML code with line 17 scratched out.

Should you wish to add more buttons, simply copy and paste line 16 or 17 onto the next line, adjusting the width parameter to “33%” for each line. Modify the percentage as needed to allocate the desired space for each button.

Changing the background colour

To enhance the look of your custom cards even further, customize the background colour of the card. The default background colour is white, but you can easily switch it to another colours by replacing “white” in the parameter below.

HTML code block with portion of line 3 highlighted where the reader can change the background colour to any colour they prefer.

Do this for all your cards (code lines for 3 card layouts are located at 3, 26, and 49.)

The final result

It is up to you whether you would like to customize everything from start to finish, or just bits and pieces here and there. Regardless of your choice, you will be left with a  more customized and unique look for your ArcGIS Hub page!

Three custom cards side by side, with custom thumbnail, title, caption, and descriptions.

About the Author

Grace Kim is an Associate GIS Analyst at Esri Canada. In her day to day, she focuses on providing support to clients and collaborates with her colleagues to solve problems using Esri’s GIS technology. Grace has a bachelor’s degree in Earth and Environmental Sciences from McMaster University and a graduate diploma from Fleming College’s GIS Applications Specialist program. In her free time, Grace enjoys going on long walks, learning new boardgames and trying out new recipes.

Profile Photo of Grace Kim