Configure a image card widget

You can configure an image card widget to provide a visual link on a page by displaying an article's featured image behind the article and the associated feed's titles.

Considerations

  • Access permissions: Users can only see articles from sites to which their group has the appropriate role and associated access permissions.
  • Featured image: A placeholder image will be displayed if the selected article doesn't have a featured image

Who can do this?

  • Workplace administrators 
  • Site administrators

Set up

  1. In the Page Builder, select New Widget.
  2. From the Widget List, select the handlebars beside the image card widget to drag and drop the widget into place on the Page Builder. See Widget placement on a page for more information on placing widgets on a page. 
  3. Select the placed widget's Edit button.
  4. Review and make changes to the settings in the Configuration side panel. See the Settings section below for more details. 
  5. In the Configuration side panel, select Save to apply your changes or Cancel to discard them.  
  6. At the top of the Page Builder, select Save Page to save your changes.

Settings

Setting Description
Expand / Collapse Select to expand and collapse the configuration side panel for increased visibility. 
Widget Title

Enter a title for the widget. The title appears as a heading above the widget's contents to provide context to the widget and structure the page's content with defined sections.

When entering a title, you do so only for the currently selected language. To enter the title for other languages, select the desired language from the Widget Title Languages dropdown and enter a title in Widget Title

Widget Title Text Color

Select a color swatch from the available color palettes or enter a hexadecimal color code for the title's text. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. 

To enter a hexadecimal color code, use the format: #99FF33

Widget Title Bar Background Color

Select a color swatch from the available color palettes or enter a hexadecimal color code for the title bar's background color. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. 

To enter a hexadecimal color code, use the format: #99FF33

Widget Title Languages Select a language from the dropdown to enter a Widget Title translation in the currently selected language.
Make Widget Full Width (Optional) Select to expand the widget to the full width of the available area or page.
Feed

Select the feed where the article currently resides. 

  1. If no feed is currently chosen, select Select a Feed. Or, if a feed has already been chosen, select Edit to choose a feed.
  2. Search for a feed in the search box or scroll through the list, and select the desired feeds. 
  3. To apply your changes, select Save.
Feed title text color

Select a color swatch from the available color palettes or enter a hexadecimal color code for the feed's title color. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. 

To enter a hexadecimal color code, use the format: #99FF33

Article

Select the article to display in the widget. If the selected article doesn't have a featured image, a placeholder image will be displayed. 

  1. If no article is currently chosen, select Select an Article. Or, if an article has already been chosen, select Edit to choose an article.
  2. Search for an article in the search box or scroll through the list, and select the desired article. 
  3. To apply your changes, select Save.
Article title text color

Select a color swatch from the color palette or enter the color's hexadecimal color code to be used for the article's title text color.

To enter a hexadecimal color code, use the format: #99FF33

Display options

Select checkboxes to hide different components of the widget from displaying. Options include:

  • Hide feed
  • Hide title

All options are unchecked by default. 

Configuration Settings

Note:

The digital workplace theme determines the appearance of the widget's content unless a widget setting specifically overrides a theme setting. See the Theme article for more information.