Add text and images

Core team members can add images and text to a site using the following cards:

• Row card—These are the building blocks of your site. Every card must nest inside a row card. You can add images and background colors to row cards. You can also create a parallax effect using this card.
• Text card—Add text anywhere to your site by dropping this card onto a row card. You can also use this card to add buttons, lists, tables, and custom code to your site.
• Image card—Add stand-alone images to any row card, anywhere on your site.

To get started, sign in to ArcGIS Enterprise and select Sites on the Overview page to view a list of your sites.

Tip:

You can also edit a site when viewing it in a browser. Be sure you're signed in and look for the edit button to the left of your site.

Add and format text

Text can be added to your site anywhere there is a row card.

1. Open a site or page in edit mode.
2. Add a Text card to a row.
3. Add text.
4. Select the text you want to format. Format options include style (Normal, Code, Headers, etc.), bold, italics, and links.
5. To change the size of text, select the style button and choose a header size.
6. To adjust text alignment, select the paragraph options and choose one. You can also move a line of text by choosing the paragraph option and selecting outdent or indent.

   Tip:

   If you make a mistake, press Command+Z or Ctrl + Z on your keyboard to revert your changes.

7. Select Save.

Note:

Font size of the base font text was increased on all sites and pages in 2021/2022 to improve readability and make web content accessible to people with diverse abilities. Read the FAQ: Upcoming changes to base font size and rem units in ArcGIS Enterprise Sites post for details.

Change text color

To apply the same color to all text on your site, change text color using your site's Theme settings. Alternatively, you can adjust text color by using row settings.

1. Open a site or page in edit mode.
2. To set a color for all text on your site or page, open the side panel and expand the Theme menu. For more information on themes, see Brand a site with header and theme options.
3. To set a color for a specific row, select the edit pencil for the row.
4. Change the color by entering a hex color code or choosing a color from the color picker.

   Tip:

   Hex codes are useful to ensure consistent branding across your organization's resources. If you're unsure of the specifics related to your organization's branding, see if it provides any documentation or brand guidelines.

5. Select Save.

Change fonts

You can change the font for text headings and base text using Google Fonts. Base text includes all text on your site’s layout. This font is also applied to any pages that have been added to your site and content preview pages accessed through the site’s search.

For more information, see Formatting text on your ArcGIS Hub and ArcGIS Enterprise Sites.

Add a bulleted or numbered list

Create a list by following these steps.

1. Open a site or page in edit mode.
2. Add a Text card to a site or page layout.
3. Add text or select existing text.
4. Select Unordered list to create a bulleted list or Ordered list to create a numbered list.
5. Select Save.

Create an accordion menu

Add a collapsible menu, a useful option for adding frequently asked questions.

1. Open a site or page in edit mode.
2. Add a Text card to the layout.
3. Select the Insert button and choose Accordion.
4. Add and format text.
5. Select Save.

Supported Calcite components

The Text card supports the following Calcite Design System components. See a catalog of all Calcite components that includes descriptions, optimal uses, examples, and more.

'calcite-action' 'calcite-accordion' 'calcite-accordion-item' 'calcite-avatar' 'calcite-block' 'calcite-button' 'calcite-card' 'calcite-chip' 'calcite-dropdown-group'

'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' 'calcite-modal' 'calcite-panel' 'calcite-rating' 'calcite-split-button'

'calcite-stepper' 'calcite-stepper-item' 'calcite-tab' 'calcite-tab-nav' 'calcite-tab-title' 'calcite-tabs' 'calcite-tile' calcite-tip' 'calcite-tooltip'

Add a stand-alone image

Add images by uploading them from a file or providing a URL to a hosted image. Images that are shared internally can only be viewed by those who are signed in and belong to the core team or organization.

1. Open a site or page in edit mode.
2. Add an Image card onto an existing row.
3. Choose an image source in the Layout editor. You can either provide an image URL or upload an image file. Both options support JPG, JPEG, and PNG.
   • To provide a URL, choose Image URL and paste a supported image link in the URL field.
   • To upload a file, choose Upload image and drag the file onto the box, or select Browse for image to locate and add your file. Maximum file size is 3 MB.
4. To customize an uploaded image, select the Crop image button and drag a handle to resize the crop frame. To reposition the crop frame, select and drag on the dotted line. To adjust the zoom, use the slider below the image and reposition the image further by selecting within the crop frame.
5. From the Options menu, provide image alt text to help non-sighted users and improve the accessibility of your site.
6. Provide an image hyperlink and set the link to open in either the same tab or a new tab.

   Note:

   Accessibility guidelines (on Input 3.2.2 and technique G201) recommend that you avoid opening links in new tabs or windows unless you provide advanced warning.

7. Provide text for Image caption and choose text alignment.
8. Optionally, select Scale image to fill to set a focal point for the image. The focal point will ensure that the image remains focused where needed as it resizes for different screens.
9. Select Save.

Create a button

A button with a link to another location, such as a section or page is a useful navigation tool. Buttons can also include calls to action.

1. Open a site or page in edit mode.
2. Add a Text card to the layout.
3. Select the Insert button and choose Button.
4. Edit the text on the button to include your call to action.
5. Select the button you just added and select the link button.
6. In the Text to display text box, add text if you haven't already.
7. In the URL text box, paste the link you want users to be directed to when they select the button.
8. Select Insert link to confirm your changes.
9. Select Save.
For information on button colors, see Create a theme.

Add background images and color

You can add images behind other cards using the Row card.

Tip:

If you are displaying text or content over an image, choose a contrasting background color. For example, if using light-colored text or displaying a light-colored map, choose a dark background color, such as black, to ensure that the text remains clear. Then, adjust the transparency of the color so the image remains visible.

1. Open a site or page in edit mode.
2. Add a Row card to the layout and format under Appearance.
3. Under Background image, choose an image source. You can either provide an image URL or upload an image file. Both options support JPG, JPEG, and PNG.
   • To provide a URL, choose Image URL and paste a supported image link in the URL field.
   • To upload a file, choose Upload image and drag the file onto the box, or select Browse for image to locate and add your file. Maximum file size is 3 MB.
4. After adding an image, select a Background color by entering a hex code or using the color picker.

   Note:

   Only row cards support background colors.

5. To adjust Image transparency, use the slider or enter a value in the percentage field. This brightens or dims the background color depending on your adjustment. This can help ensure the image and text remain accessible for non-sighted users.
6. Select Save.

Choose an image layout on a row card

Every row card has two layout options that enable you to choose how your image is displayed.

1. After adding an image to a row card, you can choose a fixed or wide layout for the image and other content displayed on the card.
   • Choose Box if you want the image to stay fixed.
   • Choose Wide if you want the image to span the width of your site.
2. Set Image focal point to ensure that the image remains focused where needed as it resizes for different screens.
3. Select Save.

Configure text with HTML

If you'd like to use HTML to customize your text, you can use the following HTML elements:

1. Open a site or page in edit mode.
2. Add a Text card to the layout and select </> Edit in HTML.
3. Enter your code and select Save.

Caution:

For security purposes, Text cards do not support embedded JavaScript. Script tags will be ignored.

The following HTML elements are allowed:

'a', 'abbr', 'acronym', 'address', 'article', 'audio', 'b',
	'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite',
 'code', 'col',
 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt',
	'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font',
	'footer', 'frameset',
	'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
 'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', 'p',
	'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp',
	'section', 'small', 'source', 'span', 'strike', 'strong', 'style'
 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'textarea',
	'th', 'thead', 'time', 'title', 'tr', 'track, 'tt', 'u','ul',

The following attributes for those elements are allowed:

 All supported HTML elements allow : ['class', 'style'],
 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle',
 'name', 'rel', 'style', 'target'],
	'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload'],
 'blockquote': ['cite'],
	'button' : ['name', 'value', 'data-toggle', 'data-target',
	'data-dismiss'],
 'col' : ['span', 'width'],
 'colgroup' : ['span', 'width'],
	'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
	'font': ['size', 'color', 'style'],
 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title',
	'width'],
 'ol' : ['align', 'start', 'type'],
	'p' : ['style'},
 'q' : ['cite'],
	'source' : ['media', 'src', 'type'], 
	'span' : [style],
 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height',
	'style', 'summary', 'width'],
 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width'],
 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width']
 'tr' : [alignt, 'height', style', valign'],
 'ul' : ['type']