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 |
TIP: Recommended image ratios:
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). |
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. |
Title |
|
Icon |
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.