# Course Tabs

<figure><img src="https://import.cdn.thinkific.com/164072/courses/2010960/CourseTabs-220924-102200.jpg" alt=""><figcaption></figcaption></figure>

This provides a nice way to feature many courses in a small amount of "real estate". It will create "tabs" of courses and is great for "special" lists for example: "What's New", "Featured Courses", "Popular Courses". The content is manually managed and will be automatically populated from specific "bundles" that you specify.

## How to use this section

* [ ] Add [Activation: Build Your Own](https://docs-snap.superpowerups.com/site-page-templates/the-captain-site-page-template-collection/build-your-own-sections/activation-build-your-own-section) section to a Site Page. *This section is required*
* [ ] Add this section to the page below the Activation: Build Your Own section
* [ ] Create "bundles" to be used for courses that will be displayed here. The bundles do not need to be a product that you sell and can be in draft mode. The bundle can be used just for the intent of controlling the order and what is displayed here
* [ ] Add a Bundle Block Setting and choose a bundle to display all courses in that bundle
* [ ] Repeat for additional bundles that you would like to display
* [ ] Adjust the section settings for your text and media
* [ ] Optionally adjust the colors in the Style & Colors settings group

## Section Settings

### Headings

* **Heading** - this is the main part of the text. It allow for special highlghting by wrapping words in brackets ex: `[SINGLEWORD]`
* **Heading (All Courses Tab)** - the all courses link will be used as a link on the far right, above the tabbed content. This setting controls the text for the link

### Course Cards

* **Use course name?** - enables or disables the course name to appear on the course card
* **Use course description?** - enables or disables the course description from appear on the course card
* **Use course price?** enables or disables the course price from appearing on the course card
* **Left Attribute** - This will determine what will be shown on the lower left hand corner of the card. Choose between ratings, # of lessons, instructor name, price, category or nothing.
* **Right Attribute** - This will determine what will be shown on the lower right hand corner of the card.Choose between ratings, # of lessons, instructor name, price, category or nothing.
* **Ratings Icon** - this determines the icon to use for the rating attribute when used&#x20;
* **Lessons Icon** - this determines the icon to use for the rating attribute when used&#x20;
* **Instructor Icon** - this determines the icon to use for the rating attribute when used&#x20;
* **Category Icon** - this determines the icon to use for the rating attribute when used&#x20;

{% hint style="info" %}
For icons, we have included Font Awesome 6.x icons library. Copy and paste a [Font Awesome icon code](https://fontawesome.com/icons) into a setting that is expecting an icon code
{% endhint %}

### Style & Colors

* **Use page background color?** - when unchecked, choose the color you wish to use for the background color of this section
* **Use theme heading color?** - when unchecked, choose the color you wish to use for the heading
* **Use theme button color for highlight?** - when unchecked, choose the color you wish to use for the color of the highlighted active tab
* **Course Card Background**  - when unchecked, choose the color of the course card background&#x20;
* **Course Card Heading** - when unchecked, choose the color of the course card heading&#x20;
* **Course Card Sub Heading** - when unchecked, choose the color of the course card subheading&#x20;
* **Course Card Price**- when unchecked, choose the color of the course card price&#x20;

### Bundle Block Settings

Having at least one of these block settings is required.&#x20;

* **Bundle:** Create "bundles" to be used for courses that will be displayed here. The bundles do not need to be a product that you sell and can be in draft mode. The bundle can be used just for the intent of controlling the order and what is displayed here


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-snap.superpowerups.com/site-page-templates/the-captain-site-page-template-collection/build-your-own-sections/course-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
