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 Featured Cards are decorative, so for accessibility purposes you should avoid using images with embedded text. Instead, leverage the Title and Description options when editing a card to communicate important information.

How it works

Like most widgets, this one is added to a page via Page Designer. There are no parameters to configure there, however, as the widget is fully managed on the "front end" of your site.

As shown below, each Featured Card 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:

a single-card layout ideal for hero images and banners
a four-card layout that displays four cards.

Single-card example

Four-card example

Widget configuration

Let's take a look at how to configure this widget.

Card layout

Two layouts are available, enabling you to choose one 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 four cards as shown in the four-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 fill the entire 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 shared between the two layouts (single- and four-card). We'll learn about these common options in this section, and focus on the unique aspects of the four-card layout in its associated section below.

Option	Description
Image	Click Select Image to display our image uploader, which you can use to upload an image directly to the widget from several locations, like your computer, a share drive, or a number of third-party platforms (Facebook, Instagram, etc.). Once uploaded, the image file is displayed here, and you can click the X to delete it and upload a new one at any time. TIP: Recommended image ratios: - Single-card layout, Banner Cards: 4:1 (at least 1200px by 300px) - Single-card layout, Split Card and Hero Card: 2:1 (at least 1200px by 600px) - Four-card layout: 4:1 (at least 1200px by 300px) 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 usage 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, our default image 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 four-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 four-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; because there are so many icons available, this is recommended to more easily find what you need. 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 four-card layout, as these icons help give each card its own visual identity. Refer to the What it looks like > four-card example section earlier in the 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 options to create a primary button; you can set the button's text, the URL to take users when clicked, as well as the button 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 options to create a secondary button; you can set the button's text, the URL to take users when clicked, as well as the button 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 pick and 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 four-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 four-card layout:

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

NOTE: When using the four-card layout, you must use all four cards (i.e., there's no way to only have two of the four cards display).

Delete all widget content

While you can edit a Featured Card widget at any time to make small adjustments, like replacing an image, updating a title or description, etc., 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 especially helpful when working with four-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 location.

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

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

As mentioned earlier, there are no widget options to configure; this widget is managed fully on the front end of your site.

Widget Spotlight - Featured Card