Example 1

The default tab container shows the tab title with the active tab coloured grey.

Tab 1

Tab one content

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mockups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.

Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearance of European languages, as are digraphs not to be found in the original.

Tab 2
Tab 3

Example 2

Display tabs in a vertical arrangement

Tab 1

Tab one content

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mockups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.

Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearance of European languages, as are digraphs not to be found in the original.

Tab 2
Tab 3
[beaver_tunnels] [/beaver_tunnels]
  1. Gary Feuerborn on January 1, 2019 at 6:03 am

    Please help.

    Is there a way to have the inactive tab a different color.? or change color of text or height? on mobile phone most people miss this tab heading that is not active.

    A simple CSS?

    Thanks
    Gary

Leave a Comment