Components documentation

Component types

Basic tab block

A tab block is a wrapper for tab navigation elements that also contains content blocks. If you use Cascade Framework's JS, well-defined tab-blocks are automaticly enabled.

First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.

Nesting

Tab blocks can be infinitely nested.

Content of item two at level one.
Content of item one at level three.
Content of item two at level three.
Content of item two at level one.

Orientation

Like the tab navigation itself, tab blocks can have different orientations.

First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.
First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.
First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.
First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.

Orientation combinations

Different orientations can be combined.

First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.
Third tab content block.
Third tab content block.
Third tab content block.
Fourth tab content block.
Fourth tab content block.
Fourth tab content block.
First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.
Third tab content block.
Third tab content block.
Third tab content block.
Fourth tab content block.
Fourth tab content block.
Fourth tab content block.
First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.
Third tab content block.
Third tab content block.
Third tab content block.
Fourth tab content block.
Fourth tab content block.
Fourth tab content block.
First tab content block.
First tab content block.
First tab content block.
Second tab content block.
Second tab content block.
Second tab content block.
Third tab content block.
Third tab content block.
Third tab content block.
Fourth tab content block.
Fourth tab content block.
Fourth tab content block.
Fifth tab content block.
Fifth tab content block.
Fifth tab content block.
Sixth tab content block.
Sixth tab content block.
Sixth tab content block.
Seventh tab content block.
Seventh tab content block.
Seventh tab content block.
Eigth tab content block.
Eigth tab content block.
Eigth tab content block.

Combinations with other components

Tab blocks integrate well with other components, which allows some very powerful combinations.

Here, you put the tab-content of the first tab.
Here, you put the tab-content of the second tab.
Here, you put the tab-content of the third tab.
Header
Footer
Header
Footer
Header

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Footer
Header

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Footer
Header

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Footer
Header

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Footer
Header

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Footer
Header

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Footer
# ID Name Dept Notes
1
2
3
4
5
Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
© 2013, John Slegers