The Featured Card widget makes it easy to create high-quality banners and card-based content, complete with customizable images, icons, text, and buttons.
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 Higher Logic Thrive Community (Thrive Community).
As you can see 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 two layouts:
- a full-width single-card layout ideal for large banners
- or a four-card layout that displays four cards.
Full-width single-card example
Let's take a look at how to configure this widget.
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 full-width 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 three ways:
1. text/buttons on left, image on right,
2. image on left, text/buttons on right,
3. or full-width image with text/buttons overlaid on top.
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.
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).
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.
This option controls the Title and Description text color.
NOTE: This option is limited to the single-card layout.
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.
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.|
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.
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 Thrive Community.