Accordion

Use the Accordion to display content in collapsible compartments.

Use <div class="accordion"> </div> to wrap your full accordion. Then, use <div class="accordion-item"> </div> to wrap each tab (and its collapsible content). The first heading within accordion-item will automatically serve as the accordion title.

Assignments Widget

Use Assignments Widget to display each assignment in a unit or module as a card.

Use <ul class="assignments-widget"></ul> to wrap your content.

Blockquote

Use Blockquote to separate any block of text along with supportive quotes. The space around the blockquote helps separate the block of text from the content that surrounds it.

Use <blockquote></blockquote> to wrap your content.

Border

Use Border to bring attention to any piece of learning content. The content is contained within a subtly-colored background, making it ideal for learning objectives or any other content that needs to stand out.

Use .border to wrap your content. You may use a single element or multiple.

Calendar Cards

The Calendar Cards widget is used to display interactive, image-based cards for various course activities such as discussions, readings, and quizzes. Background images are applied automatically and dynamically based on card class, and can be customized if desired.

Wrap your cards inside a <div class="calendar-grid"> container.

For each individual card item, add the class calendar-card along with one of the following modifiers:

• discussion-post
• discussion-response
• activity
• reading
• quiz

Custom Images

Add custom background images by providing new URLs for the --card-bg-image CSS property on each specific class in the custom.css file. For example:

  .calendar-grid .calendar-card.discussion-post {
       --card-bg-image: url('https://your-custom-url.jpg');
  }

Call Out

Use Call Out to bring attention to any supplementary learning content. The content is contained within a colored background with an "Explore More" heading attached.

Use .call-out to wrap your paragraph element.

Card Horizontal

Use Card Horizontal to display an image with supportive text. Both the image and text display horizontally with the text side displaying wider than the image.

Use .card-horizontal as the parent element of both .card-body, which contains the text, and
.card-img, which contains the image.

Writing an effective essay requires clear organization and purpose. The introduction presents the topic, while body paragraphs develop key points with supporting evidence. Finally, the conclusion ties everything together, reaffirming the thesis. Proper transitions between sections ensure a logical flow of ideas, guiding the reader through the argument.

Show code

Columns

Use Columns to format text, images, and other widgets in a side-by-side fashion. A maximum of three columns will appear one line, and additional columns will automatically wrap to the next line. On mobile view, each column will stack.

Use .columns as the parent element. Each nested block element will format as a column – wrap multiple elements within a div to keep them in the same column.

About Epistemology

Epistemology examines the nature and limits of knowledge, questioning what it means to "know" and how knowledge differs from mere belief. Epistemologists seek to define truth and explore how people justify beliefs, bridging the gap between opinion and fact.

In cognitive science, researchers study the mechanisms behind thought and perception, integrating psychology, neuroscience, and computer science. This interdisciplinary work has fueled advances in artificial intelligence and deepened our understanding of mental processes and human-computer interactions.

Show code

Content Lock

Use the Content Lock Widget to lock and unlock content.

Use .content-lock-widget to wrap the entire widget. Use .locked-content to wrap the content you want hidden. Use .instructions to inform students what they need to do to unlock the content. Use .unlocked-btn to label the action for unlocking the content.

Data Keys

Each Content Lock Widget needs a numeric data-key on the .locked-content div. Matching keys control what unlocks together.

For Example:

If two Content Lock Widgets on a single page have the same data key. Once one is unlocked, both will unlock. If they have different data keys, they can be unlocked independently.

Content Lock Quiz

Use the Content Lock Widget Quiz to lock and unlock content through a simple quiz with one correct answer.

Use .content-lock-widget to wrap the entire widget. Use .locked-content to wrap the content you want hidden. Use .instructions to inform students about why content is hidden. Use .quiz to wrap the quiz elements. Use .correct-answer to mark the correct quiz option.

Data Keys

Each Content Lock Widget needs a numeric data-key on the .locked-content div. Matching keys control what unlocks together. Use one quiz per data-key so each quiz unlocks only one locked area. If multiple locked areas share a key, they will all unlock when that quiz is answered correctly. Quiz and non-quiz Content Lock Widgets use the same key system, so sharing a key between them will unlock both.

Expandable Banner

Users are able to display the full size of banner images with the Expandable Banner.

Add the expandable-banner class to <header class="header"><header> to enable the Expandable Banner.

Enabling the Expandable Banner will add a button to the banner image that allows users to expand the image to its full size. Clicking on the button opens an overlay that includes the full image and the optional caption/description.

The Expandable Banner comes with a few options. Users can display:

1. An image with no description.
   Copy code

   // This option has no alt text and no data-description attribute
   <header className="header expandable-banner">
     <img src="/images/widgets/expandable-banner/portrait-art.jpg" alt="" />
     <div class="text-container">
       <h1>Module 1: Lorem ipsum dolor</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
     </div>
   </header>

2. An image that uses the alt text as the description. Alt text should be short and concise. If the description is longer and more detailed, use the next option.
   Copy code

   // This option contains a short alt text that will display as a caption
   <header className="header expandable-banner">
     <img src="/images/widgets/expandable-banner/portrait-art.jpg" alt="The Salon of Hercules ceiling painting in the Palace of Versailles" />
     <div class="text-container">
       <h1>Module 1: Lorem ipsum dolor</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
     </div>
   </header>

3. An image with a detailed description that uses the data-description attribute.
   Copy code

   // This option also contains a more detailed data-description attribute that will display as a caption
   <header className="header expandable-banner">
     <img src="/images/widgets/expandable-banner/portrait-art.jpg" alt="The Salon of Hercules ceiling painting in the Palace of Versailles" data-description="The Salon of Hercules ceiling painting in the Palace of Versailles, completed by François Lemoyne in 1736, is a grand Baroque masterpiece titled The Apotheosis of Hercules. Covering an expansive 1,400 square feet, the fresco depicts Hercules ascending to Mount Olympus, welcomed by the gods in a dramatic and dynamic composition filled with swirling clouds, rich colors, and expressive figures." />
     <div class="text-container">
       <h1>Module 1: Lorem ipsum dolor</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
     </div>
   </header>

Expandable banner sample

Module 1: Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Copy code

<header className="header expandable-banner">
  <img src="/images/widgets/expandable-banner/portrait-art.jpg" alt="" />
  <div class="text-container">
    <h1>Module 1: Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
</header>

Flip Card

Use Flip Card as a flashcard with a front and back of the card, you can allow students to view terms and definitions separately.

Use .flip-card-group to wrap your flip cards.

Within the .flip-card-group add flip cards each with their own term and definition.

Apply the .long class to the .flip-card-group container to make the height of the flip cards larger.

Horizontal Display

Use Horizontal Display to display any content in an inline manner. This content will appear inline on desktops but will stack on smaller screens.

Use .horizontal-display to wrap.

Show code

Image Gallery

Use Image Gallery to display images in a grid and allow users to expand the images.

Use <div class="image-gallery"></div> to wrap your content.

Show code

Info Table

Use the Info Table Widget to create a definition list that displays side-by-side like a table.

Use .info-table on a <dl> element. Use <dt> tags for terms and <dd> for definitions.

Media Container

Use Media Container to display any iframe with accompanying text or without.

With caption

Use .media-container as the parent element of both.media-object which will house your iframe and.media-info which will house your video's caption.

Without caption

Use .media-container as the parent element of.media-object which will house your iframe.

Numbered DL

Use the Numbered DL Widget to create an automatically numbered definition list.

Use .numbered-list on a <dl> element. Use <dt> tags for terms and <dd> for definitions.

Persistent Checklist

Use the Persistent Checklist to create a group of checklist items that will save the checked state across page loads. This is useful for tasks that users may want to track over time, such as assignments, reading lists, or project tasks.

Use .persistent-checklist to wrap the vocabulary list. Use a <ul> tag to wrap the list items and a <li> for each checklist item.

Note: Try refreshing your page after making a change to the checklist and notice how the checklist state is saved.

Side-by-side

Use Side-by-side to display two horizontal containers that can contain any content.

Use .side-by-side as the parent element of two.side-by-side-item.

In academic writing, clarity and coherence are crucial for effectively communicating ideas. Start each paragraph with a clear topic sentence that introduces the main idea, followed by supporting sentences that elaborate on this idea. It is important to use transitional phrases to guide the reader through your argument and maintain a logical flow. Always revise your drafts to eliminate any grammatical errors and ensure that your writing meets the assignment’s requirements.

Show code

Slider

Use the Slider component to display content in a horizontal carousel interface.

Wrap the full component in <div class="slider-widget"></div> and place each slide inside a <div class="slider-item"></div>.

Aenean euismod

Nunc sed lacus sit amet purus convallis vestibulum vitae quis libero. Nunc consectetur tristique aliquet.

Suspendisse risus ex, vestibulum non leo sit amet, consequat ultricies eros.

Show code

Social Post

Use the Social Post widget to display an image and caption styled as an interactive social media-style post for visual interest.

Use .social-post to wrap all widget content. Use .social-post-title to wrap an optional title in the username position. Use .social-post-image to wrap your <img> element. Then, use .social-post-body to wrap your caption content.

All other widget elements will be added dynamically via JavaScript.

Username

Nullam lobortis quam id justo porta suscipit.

Show code

Tables

Use Tables to organize information in rows and columns. Add .display-lg to <table> to create a responsive table.

Additional classes are globally available to further customize your tables:

Table Variants

.display-lg → Applies responsive js to table (mobile stacking)

.custom-width → Sets specific column widths and can be customized (use alongside .display-lg)

.two-column-table → Two-column label/value table layout (use in place of .display-lg)

Utility Classes

.no-margin → Removes all margin (add to <table>)

.no-padding → Removes all padding (add to <table>)

.sm-table-col → 20% column width (add to individual <th>)

.md-table-col → 30% column width (add to individual <th>)

.lg-table-col → 50% column width (add to individual <th>)

Tabs

Use the Tabs Widget to organize and separate related information into their own individual tabs. Best used when there are multiple tabs.

Use .tabs to wrap your entire tab widget. Use <label class="tab-header">Tab Title</label> to edit the title.
Use <div class="tab-panel"> [content inside] </div> to edit what appears inside the tabs.

Video Widget

Use Video Widget to create a grid-like video gallery. In addition to the video, each video card can contain general information such as the title and duration of the video.

Use <div className="video-widget"></div> to wrap your content.

Vocab Cards

Use the Vocab Cards Widget to create a set of flashcards with terms and definitions.

Use .vocab-cards to wrap the vocabulary list. Use <dt> tags for terms and <dd> for definitions.

Vocab List

Use the Vocab List Widget to create a list of collapsible vocabulary items with terms and definitions.

Use .vocab-list to wrap the vocabulary list. Use <dt> tags for terms and <dd> for definitions.