Advice and answers from the Tribal Habits Team

How do I create tabs, lists, buttons, flip cards or accordions of content?

The interact element can be used to transform text into more interactive learning elements.
Written by David King
Updated 3 months ago

Creators can use the Interact element to transform paragraphs of text into different interactive layouts.

Note: The Interact element requires a Creator subscription.

How do creators add content to the Interact element?

Creators can start by adding the Interact element into any point in their topic or article, just like any other element. Each Interact element consists of...

  • An overall title for the element. This might be a simple title or some instructions about the element itself.
  • Up to 10 items of content. Each item needs a title and text content (with full text formatting available). Each item can also have an optional image, including access to the image library, image editor and descriptive text for screen readers.
    Items can be inserted next to the current item, or moved to change the order of each item.
  • Finally, the creator can select a checkbox to force explorers to review all items before they can progress to the next section in that point.

What are the different layouts?

A final choice in the Interact element is the layout. There is a dropdown menu at the top of the element for Creators to select the layout for their items.

Note that each layout suits different types of content and Creators may want to test a few different layouts to find the most suitable one. The choices, and tips for their best use with different content, are as follows.

Accordion

The Accordion layout provides a vertical row of wide buttons to display your items one-by-one. Accordion is a good choice when you have lots of items to display or want to promote the feeling of 'moving' through content. However, as opening and closing items in an Accordion triggers an animation, Accordions work best with smaller amounts of similarly sized. content.

Buttons

The Button layout provides a vertical row of buttons to display your items. Buttons can easily display up to 10 items, but each item needs a short title. Buttons also work best with smaller amounts of content with no, or small, images, such as definitions, FAQs, scenarios. This helps all the buttons stay on the screen at once. The vertical order of buttons can be used for simple step-by-step processes too.

Flipcards

The Flipcard layout provides a grid of 'cards'. Each card has the item title and image on the front, and the item content on the back of the card. The cards card be flipped (click, touch or press enter) to move between the title and the content. Flipcards are very interactive and great for presenting 'matching' items like definitions or scenarios. Content is limited to the size of a card, however, so you need to keep your content to less than 300 characters.

List - Numbered, Alpha and Bullet

The List layout provides an animated, graphical layout of items, including an optional image for each item. Lists have the most flexibility with item content and can handle large variations in length between each item. There are three different list layouts.

  • Numbered. These lists are automatically numbered, so can be used for step-by-step instructions, ranked content ('Top 5 ideas') or ranked options ('Best to least suitable').
  • Alpha. These lists are automatically labelled A-J. They are also useful for step-by-step processes, as well as presenting alternative options or different scenarios.
  • Bullet. These lists are not labelled - they just have the bullet. They are useful for lists where the order is not important (or you want to avoid suggesting a rank or order).

Tabs

The Tab layout provides a horizontal menu of tabs to display your items. Tabs work best with short (single word) titles and up to 4-6 tabs in total. Tabs also display best when each item has a similar length of content. Since tabs only show one item at a time, they are useful for making complex content easier to review. Tabs are also great when each item has a lot of content.

Did this answer your question?