The Featured Card widget makes it easy to create high-quality hero images, banners, and other card-based content, complete with customizable images, icons, text, and buttons.

ACCESSIBILITY: The images in the Featured Card widget are decorative; so, for accessibility purposes, avoid using images with embedded text. Instead, leverage the Title and Description fields to communicate important information.

How it works

The Featured Card widget is added to a page via Page Designer. The widget is then managed on that page in the community, with the exception of the Syndicate Content option, which is described in the Add this widget section at the end of the article.

As shown below, the widget has a management menu at the top left, allowing you to edit the cards or delete them.

NOTE: Refer to the Widget configuration section below for a deep-dive into configuring this widget and managing its content.

What it looks like

This widget can be configured with either of two layouts:

The single-card layout is ideal for hero images and banners because it spans the full width of the page.
The multi-card layout gives you more "design" options because it displays two, three, or four cards.

Single-card example

Multi-card example

Widget configuration

Let's look at how to configure this widget.

Card layout

Two layouts are available, so you can choose whichever one is better based on the purpose of the widget. For example:

do you want to display a large banner like you see in the single-card example above, or
do you want to display several cards as shown in the multi-card example?

TIP: You can configure the full-width single-card layout in one of four ways:

1. Split Card: Image First - Image on left, text/buttons on right. We recommend landscape images that are at least 1200px wide by 600px tall.
2. Split Card: Image Second - Text/buttons on left, image on right. We recommend landscape images that are at least 1200px wide by 600px tall.
3. Banner Card - Use to display banner-type images. Any provided text/buttons are overlaid on top. Because the image corners are rounded, this option isn't suitable for hero images. We recommend landscape images that are at least 1200px wide by 300px tall.
4. Hero Card - Use to display full-width hero images. Any provided text/buttons are overlaid on top. Unlike the Banner Card, image corners are not rounded and fill the entire page, making this layout ideal for hero images. We recommend landscape images that are at least 1200px wide by 600px tall.

Note about Hero Cards

Images used in Hero Cards should be large, in a 2:1 ratio (1200x600px is recommended).

For hero images to span the full width of the page, you must use the single Row option in Page Designer and configure it to display as a Full-width row, as shown below:

Common options

Most of the options you'll configure for this widget are the same for both layouts (single- and multi-card). We'll learn about these common options in this section, and focus on the unique aspects of the multi-card layout in its associated section below.

NOTE: Section Enhancements - The Add Buttons section has some changes and enhancements, most notably: i) the "URL" fields now accept page codes in addition to URLs and ii) the Secondary button "Add/Remove" toggle has been moved to above the button's configuration section.

Option	Description
Image	Click Select Image to display the image uploader, which you can use to upload an image directly to the widget from several locations, such as your computer, a share drive, or a third-party platform. The uploaded image file displays here; click the X to delete it and upload a different image. TIP: Recommended image ratios: - Single-card layout, Banner Card: 4:1 (at least 1200px by 300px) - Single-card layout, Split Cards and Hero Card: 2:1 (at least 1200px by 600px) - Multi-card layout: 2:1 (at least 1200px by 600px) To the right is the Image overlay color option, which you can use to overlay color to your uploaded image, if needed. When choosing a color, you can enter a hex code, RGB numbers, and use the gradient sliders to get the exact color you want. In addition, you can leverage the transparency slider to control the level of transparency. ACCESSIBILITY: Proper use of an image overlay color can enhance the contrast between the image and any text, which is important for users who are color blind. TIP: If you don't upload an image, the default background will display. The color of this default background is controlled by the Primary Color in the Theme's Color Picker (Site Options > Themes > edit theme). Also, if you'd like a simple, solid background color, don't upload an image and just choose an Image overlay color with no transparency.
Content alignment	Use this option to left align, center align, or right align all content for single-card layouts. NOTE: This option is limited to the single-card layout.
Text color	This option controls the Title and Description text color. NOTE: This option is limited to the single-card layout. In multi-card layouts, text is automatically black because the background is white.
Title	In the single-card layout, the title displays with large, bold font. In the multi-card layout, the title text is the same size as the description text but bold to draw focus.
Icon	Click the + Add icon link or - Remove icon link to add/remove icons. Click the Icon dropdown to select from a massive library of SVG icons. You can use the search field at the top to locate icons based on name; this is recommended because so many icons are available. Also, you'll be viewing a limited number of icons to start; click All Icons at the bottom right of the pop-up to view the full list. Use the Icon color and Icon background color options to customize these two aspects of the icon. When choosing a color, you can enter a hex code, RGB numbers, or use the gradient sliders to get the exact color you want. In addition, you can leverage the transparency slider to control the level of transparency. TIP: While you can add an icon to the single-card layout (as shown above), it's better suited to the multi-card layout because these icons give each card its own visual identity. Refer to What it looks like > Multi-card example earlier in this article for an example.
Description	Enter a description here to explain the card's purpose. You cannot customize the size or look of the font, but it will be appropriately sized according to your chosen layout.
Primary button	Use these settings to create a primary button. You can set the button's text, its "target" page (a URL or a page code), and the button color and text color. TIP: Check the Open in new tab box to open the linked page in a new tab while preserving the current community page.
Secondary button	Use these settings to create a secondary button. You can set the button's text, its "target" page (a URL or a page code), and the button color and text color. TIP: Check the Open in new tab box to open the linked page in a new tab while preserving the current community page. NOTE: The Secondary button is limited to the single-card layout. Click the + Add secondary button link or - Remove secondary button link to add/remove this button.

TIP: It's not required to include a title, description, or buttons for a card; you're free to choose what content to include or exclude to create cards that meet your needs.

For example, if you don't want a Primary button to display, simply delete its Primary button text (you can keep the URL and color content).

When working with the multi-card layout

While the configuration options between the two layouts are the same, there are two differences to keep in mind when working with the multi-card layout:

With this layout, you'll have multiple sections that you can expand/collapse to customize each of the cards.
You can also drag and drop each section to rearrange the cards.

Delete all widget content

While you can edit a Featured Card widget to make small adjustments (like replacing an image, updating a title or description), you can also completely wipe all content at once.

In instances where you want to start from scratch, this enables you to do so with the click of a button rather than having to delete content line by line. This is particularly helpful when deleting multi-card layouts.

IMPORTANT: This action cannot be undone. Images are uploaded directly to the widget, so if there are images you want to save or reuse, make sure you have access to those image files before deleting them.

To wipe all content from a Featured Card widget:

Click the widget's dropdown, followed by Delete.
In the confirmation popup, click Delete.

Add this widget

You can add this widget to any page across your site via Page Designer.

Navigate to the page you'd like to add the widget to.
On the Admin Toolbar at the top of the page, click Edit Page. You are now editing the page in Page Designer.

In the Build tab > Widget section, type "featured" in the search field to quickly locate the widget.
Drag and drop the widget onto the canvas in the desired page location.

With the widget selected on the canvas, click the Properties tab.
Configure these properties, paying special attention to the name and View Permission (to control who can view it).

With the widget selected on the canvas, click the edit icon (paper and pencil) at the top left. In the resulting dialog, there's one option you need to consider: Syndicate Content. Click the toggle to turn this option ON or OFF, depending on your needs, and then click Save to apply and close the dialog. Read more below.

NOTE: The Syndicate Content option controls whether this Featured Card widget will be displayed across all syndicated pages associated to the page you're editing.

This option is most useful for community home pages. Because all communities (by default) share a single, syndicated home page, this option (when off) allows each community home page across your Higher Logic site to have its own unique Featured Card content, perfect for community-specific banners and content.

Lastly, click Publish to save your changes and make the page live.

Widget Spotlight - Featured Card