The Cards section is generally used on the All Courses Page or the Student Dashboard Page. You may also use it on any page you like, but be sure to set the Section Type setting to something other than AutoYou will need to add the Cards section along with the Sidenav Menu on each page and configure them separately. While on the Student Dashboard page, clicking on a category link will automatically display courses for that category from the student dashboard. If the student is not enrolled in any courses for that category then none will appear.

In order to to see your courses appear, you must add a Cards section to the page after you have added the Sidenav Menu section.

There can be more than one Cards section on the page, but there should only be one Course Card section that has a Section Type = Auto

After adding the Cards section to your page, you will be able to configure:

  • The type of section this is

  • Text used in the heading part of the section

  • Text used for the filters part of the section

  • Card style, and text used on the course card

Managing the section type

In some cases you may want to have multiple Card sections on a page. For example, let's say you have a membership with a free trial. For free trial users, you would want to "tease" the content they are missing by adding a section Cards section that is set to upsell them to the membership bundle.

Section Type: Auto generated cards

This type is only used on the All Courses and Student dashboard pages and on these pages, you should always have one of the Cards sections added to the page.

The Auto section type will always appear above any other Cards section you may have added to the page and also will always appear below any Sidenav Banner (Slider) section

Section Type: Upsell Bundle

This type is used to display a list of courses in a bundle with the intention of "teasing" content that the user does not have. Ex: You want to upsell individual courses or you want to upsell a membership bundle.

The filter settings are ignored for this type of section as a filter and search is not added to the section, only the cards will appear.

Managing the section headings

This setting group allows you to manage the text that appears on the section. Keep in mind that this

Changing or disabling the filter default text

You may wish to change the default text used in the course search and filter section of the page

The filter options are only available on the Student Dashboard. On the All Courses page, the search will still be available.

Card Style & Text Options

There are a few different styles of course cards available and you also have options to change text that will appear along side your course card image.

Text Overlay Card Style

This card style is great when you have a picture for a card that gives a visual clue to what the course is about. It will use your course card image as a background and automatically crop the image to fill the space based on the height of the card you choose. It will also overlay the name of the course along with a gradient fill so that the course name stands out.

When using the Text Overlay card style, the course card image will "fill" the entire area of the card. Depending on the card size, your image may be cropped. If you are using course card images that have text "in the image", then you probably want to use the Image Only option below

Text Under Image Card Style

If you want a more traditional card style, you can choose the Text Under Image setting and have the course card image appear above the course name. You can also optionally add the course description to the card as well.

When using this option, the image will be shown in its entirety.

Image Only Card Style

Image only cards are perfect when your image already has the course name. Usually this is done to make your names more interesting on the card image. In this case, you most likely want to use the Image Only option.

When using this option, the image will be shown in its entirety.

Card Badge Settings

The "badge" is an overlay on top of the image to have an icon and some text to help the user make a decision on what to do. You can control the location of the badge as well as if you want to hide them completely. You can also change the text that appears as well.

Bottom Left and Bottom Right are not supported when the Card Type is Text Overlay

In some situations, you may want to have your course cards that are displayed on the Student dashboard to go to your course landing page instead. You can change the link that is used by changing the Link Type (Dashboard) setting

This setting is only available on the Student Dashboard page with an section type setting of Auto

Advanced Style Tweaks

Card Badge Color Changes

Add a Swiss Embed Code to the page and then paste this code snippet to change the color and font behavior of the badge that appears over the course cards

    /* Card badge */
    .cards-section .cat-course-card .post__video {
        background-color: #FF0089;
        color: #FFFFFF;
        font-family: 'Montserrat', sans-serif;
    /* Card badge icon*/
    .cards-section .cat-course-card .post__video i{
        color: #FFFFFF;

    /* Hover */
    .cards-section .cat-course-card .post__video:hover {
        background-color: #FFFFFF;
        border-color:  #FFFFFF;
        color: #FF0089;
    .cards-section .cat-course-card .post__video:hover i{
        color: #FF0089; 

Last updated