Add text and images

Site editors can add images and text to a site using the following cards:

• Row—These are the building blocks of your site, as every other card must nest inside a row card. You can add images and background colors to row cards. For more information about formatting rows, refer to Design the site layout.
• Text—Add text anywhere on your site by dragging this card onto a row card. You can also use this card to add buttons, lists, tables, and custom code to your site.
• Image—Add stand-alone images to any row card, anywhere on your site using an image card..

Add and format text

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

To add and format text, complete the following steps:

1. Edit a site or page layout.
2. On the Customize panel, click Layout.
3. Drag a Text card onto a row in the layout.
4. Select any text you want to format.

   Options include style (Normal, Code, Headers, and so on.), bold, italics, and links.

5. To adjust text size, select the style button, and choose a header size.
6. To adjust text alignment, select the paragraph options, and choose one; to move a line of text, choose the paragraph option, and select outdent or indent.
7. Click Save layout.

Change text color

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

To change the text color, complete the following steps:

1. Edit a site or page layout.
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 about themes, see Brand a site with header and theme options.

3. To set a color for a specific row, click the Edit button for the row.
4. Change the color by entering a hex color code or choosing a color.

   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. Click Save layout.

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, item details pages accessed through the site’s search, and any events views.

Add a bulleted or numbered list

To add a bullet or number list, complete the following steps:

1. Edit a site or page layout.
2. Add a Text card to a row.
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. Click Save layout.

Add a stand-alone image

To add a stand-alone image to a row card, complete the following steps:

1. Edit a site or page layout.
2. Drag an Image card onto a row in the layout.
3. Under Image, choose an image source.

   Both options support JPG, JPEG, PNG, and so on.

   • 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 add an image (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.
5. From the Options menu, provide image alt text to help nonsighted users and improve the accessibility of your site.
6. If applicable, provide an image hyperlink, and set the link to open in 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 the text alignment.
8. Optionally, select Scale image to fill to set a focal point for the image.

   The focal point ensures that the image remains focused where needed as it resizes for different screens.

9. Click Save layout.

Add background images and color

You can add images behind other cards using a row card.

Tip:

To display 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 color transparency so the image remains visible.

To add background images and color, complete the following steps:

1. Edit a site or page layout.
2. Add a Row card to the layout and format under Appearance.
3. Under Background image, choose an image source.

   Both options support JPG, JPEG, PNG, and so on.

   • 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 add an image (maximum file size is 3 MB).
4. Select a Background color by entering a hex code or choosing a color.

   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 and can help ensure the image and text remain accessible for nonsighted users.

6. Click Save layout.

Choose an image layout on a row card

Every row card has two layout options for how an image is displayed.

To choose an image layout, complete the following steps:

1. After adding an image to a row card, choose a fixed or wide layout for the image and other content displayed on the card as follows:
   • 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. Click Save layout.

Add 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, prompting people to do something, such as to sign up, learn more, or take a survey. Buttons use the Body link color and Body background color settings to ensure that they are accessible to all types of users. Find details in this Update to Hub button theme colors.

To add a button, complete the following steps:

1. Edit a site or page layout.
2. Add a Text card to the layout.
3. Select the Insert button, and choose Button.
4. Select </> Edit in HTML.
5. In the 'href' tag, enter the URL in place of '#' and the link text in place of 'Button' (Calcite component guidance).
6. Select Apply, and click Save layout.

Add an accordion menu

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

To add an accordion menu, complete the following steps:

1. Edit a site or page layout.
2. Add a Text card to the layout.
3. Select the Insert button, and choose Accordion.
4. Select </> Edit in HTML to add and format text (Calcite component guidance).
5. Select Apply, and click Save layout.

Find supported Calcite components

The Text card supports the Calcite Design System components listed below. 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-dialog'

'calcite-dropdown-group' 'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' '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-tooltip'

Configure text with HTML

Customize your text with HTML using the elements and attributes listed below.

To configure text with HTML, complete the following steps:

1. Edit a site or page layout.
2. Add a Text card to the layout.
3. Select </> Edit in HTML to add and format text (Calcite component guidance).
4. Use the <a> tag to create a link to a page. Paste the slug for the page between the href="" attribute of the <a> tag, for example: <a href="/pages/target-page">Visit the linked page</a>.

Tip:

If you use a relative path in the <a> tag instead of the absolute path, you can prevent a full page refresh when you select the link. To open the link on a new tab, append target="_blank" directly after the href attribute on the <a> tag.

5. Select Apply, and click Save layout.

Note:

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

HTML elements 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' 'image' 'input' 'ins' 'kbd' 'keygen' 'li'

'link' 'main' 'map' 'mark' 'menu' 'meter' 'nav' 'ol' 'optgroup' 'option' 'output' 'br' '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 attributes listed below 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']

Related links

For additional information, see the following:

• Edit a site
• Calcite component guidance