Code symbol #
Item name
Name of item [#]
Modifier codes
A no heading modifier code (_) can be added to remove the heading.
A padding modifier code (!) can be used to add additional space before the tab box.
The tab component will restyle the item content in a tab layout.
The content structure for a tab is the same as an accordion. The content in a tab item is divided up by the Blackboard Heading style (H4). Each heading becomes a tab heading, and the following content is gathered into the hidden container under the tab. This repeats for each heading.
Warning
Any content preceding the first heading will be removed or may break the styling script.
Careful consideration should be taken when choosing the tab component to deliver you information. The tab buttons are not very long so headings need to be kept short. Too many tabs will wrap inside the container and make tab selection confusing. Only one tab can be displayed at a time, making it difficult to quickly compare information between tabs.
Example
The following item title will restructure the content into a tab layout (#). This is the same content as the accordion example where the content consists of four headings, each followed by some text and an image. The headings become the tabs buttons to open each item and to show content within.
Lorem Ipsum information [#]
