- Download v1.6

- Grid
- Typography
- Icons
- Components
- Templates

- Home
- Grid
- Typography
- Icons
- Components
- Templates

# Components documentation

Component types

- Panels
- Tab blocks
- Tables
- Navigation

## 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.

- Item one
- Item two

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.

- Item one level one
- Item two level one

- Item one level two
- Item two level two

Content of item two at level one.

- Item one level three
- Item two level three

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.

- Item one
- Item two

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.

- Item one
- Item two

- Item one
- Item two

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.

- Item one
- Item two

## Orientation combinations

Different orientations can be combined.

- Item one
- Item two

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.

- Item three
- Item four

- Item one
- Item two

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.

- Item three
- Item four

- Item one
- Item two

- Item three
- Item four

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.

- Item one
- Item two

- Item three
- Item four

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.

- Item five
- Item six

- Item seven
- Item eight

## Combinations with other components

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

- Item one
- Item two
- Item three
- Item four
- Item five

- Subitem one
- Subitem two
- Subitem three

- Subitem four
- Subitem five

- Subitem six
- Subitem seven

- Subitem eight
- Subitem nine

- Subitem eleven
- Subitem twelve

- Item one
- Item two
- Item three

- Item one
- Item two

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

- Gallery
- Form

### Photos

First name
Last name
Country
Gender
Man Woman
Occupation
Hobbies
Web development Design Programming
Comment
Footer
Header

- Gallery
- Form

### Photos

First name
Last name
Country
Gender
Man Woman
Occupation
Hobbies
Web development Design Programming
Comment
Footer

- One panel
- Two panels
- three panels

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

- Datasheet
- Regular table
- More info

# | 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

- Gallery
- Form

### Photos

First name
Last name
Country
Gender
Man Woman
Occupation
Hobbies
Web development Design Programming
Comment
© 2013, John Slegers