Cards

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.

• Open the _Section Type _ settings group and make sure the section type setting is set to Auto

• When used on the student dashboard page, the users enrolled courses will be shown

• When used on the all courses page, the public courses will be shown

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.

• Open the _Section Type _ settings group and make sure the section type setting is set to:

  • Upsell Bundle (Any): Only courses that the student is not enrolled in will show. If they are enrolled in all of the courses in the bundle, then this section will not be shown.

  • Upsell Bundle (All): This section will only show if the student is not enrolled in all of the courses in the bundle

• Choose the bundle in the Upsell Bundle setting. (The bundle does not have to be published). Make sure you have courses added to your bundle

• Set the Link Type to Course Landing if you want the cards to be linked to the course landing page

• Set the Link Type to Other page if you want the cards to be linked to a different page. Then set the Other page setting to the page you would like the cards to be linked to.

• Also be sure to set both the Default Heading and Category Heading for this section

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

• Open the Section Headings settings group

• Change the Default heading setting to control what text appears initially when the page loads

• When viewing a category or subcategory page, make sure the Category heading setting includes the SmartText: [AUTO] so that it shows the name of the category. You can decide if you want to append or pre-pend it with other text. example: [AUTO] Courses => Dog Training Foundation Courses

• Set the No results setting to include the text you wish to display when a category or search result has zero course cards to display

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

• Open up the Filter Headings setting group and update the text that you wish to use

• Optionally disable this section by unchecking the Show filter headings box

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.

• Open the Cards settings group and change the Style Type setting to Text Overlay

• You can also change the course card height by using the Text Overlay Card Height setting

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.

• Open the Cards settings group and change the Style Type setting to Text under image

• You can also change add the course description to the card by checking the Show course description setting

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.

• Open the Cards settings group and change the Style Type setting to Image Only

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.

• Choose the location of the badge by selecting the Badge Type setting

• If you do not want to use this, then choose None

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

• To change the text that appears on the badge, update the text for the various conditions that the course could be in

Card Link Settings

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

• To have the course cards go directly into the course, choose "Resume" for the Link Type (Dashboard) setting

• To have the the course cards go to the course landing page, choose "Landing" for 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

<style>
    /* 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; 
    }
</style>