mass media
All-in-one Marketing app
You can quicly setup a styled table by adding the
.table class to a table Html element.
Several modifiers are also available. You can use any combination of
them.
| ID | Username | Position | Role | Current projects | Specialized in | Actions |
|---|---|---|---|---|---|---|
| 1 | Michael Hoffman | Engineer | Admin | 21 projects | Php, Javascript, Html & CSS | |
| 2 | Marjory Cambell | Sales Rep | Contributor | 03 projects | Sales and Marketing | |
| 3 | Kevin Smith | Engineer | Collaborator | 12 projects | Javascript, Angular, Vue js | |
| 4 | Adrian Fallow | Sales Manager | Reader | 07 projects | Sales and email marketing | |
| 5 | Helen Miller | Marketing Manager | Collaborator | 03 projects | Sales and email marketing | |
| 6 | Sarah Mitchells | Accountant | Collaborator | 01 projects | Finance and Accounting | |
| 7 | Kareem Jabbar | Accountant | Manager | 14 projects | Finance and Accounting |
To draw borders around the table and its cells, add the
.is-bordered modifier class to a
.table element.
| ID | Username | Position | Role | Current projects | Specialized in | Actions |
|---|---|---|---|---|---|---|
| 1 | Michael Hoffman | Engineer | Admin | 21 projects | Php, Javascript, Html & CSS | |
| 2 | Marjory Cambell | Sales Rep | Contributor | 03 projects | Sales and Marketing | |
| 3 | Kevin Smith | Engineer | Collaborator | 12 projects | Javascript, Angular, Vue js | |
| 4 | Adrian Fallow | Sales Manager | Reader | 07 projects | Sales and email marketing | |
| 5 | Helen Miller | Marketing Manager | Collaborator | 03 projects | Sales and email marketing | |
| 6 | Sarah Mitchells | Accountant | Collaborator | 01 projects | Finance and Accounting | |
| 7 | Kareem Jabbar | Accountant | Manager | 14 projects | Finance and Accounting |
To make a table's rows striped, add the
.is-striped modifier class to a
.table element.
| ID | Username | Position | Role | Current projects | Specialized in | Actions |
|---|---|---|---|---|---|---|
| 1 | Michael Hoffman | Engineer | Admin | 21 projects | Php, Javascript, Html & CSS | |
| 2 | Marjory Cambell | Sales Rep | Contributor | 03 projects | Sales and Marketing | |
| 3 | Kevin Smith | Engineer | Collaborator | 12 projects | Javascript, Angular, Vue js | |
| 4 | Adrian Fallow | Sales Manager | Reader | 07 projects | Sales and email marketing | |
| 5 | Helen Miller | Marketing Manager | Collaborator | 03 projects | Sales and email marketing | |
| 6 | Sarah Mitchells | Accountant | Collaborator | 01 projects | Finance and Accounting | |
| 7 | Kareem Jabbar | Accountant | Manager | 14 projects | Finance and Accounting |
You can make rows narrower by adding the
.is-narrow modifier class to a
.table element.
| ID | Username | Position | Role | Current projects | Specialized in | Actions |
|---|---|---|---|---|---|---|
| 1 | Michael Hoffman | Engineer | Admin | 21 projects | Php, Javascript, Html & CSS | |
| 2 | Marjory Cambell | Sales Rep | Contributor | 03 projects | Sales and Marketing | |
| 3 | Kevin Smith | Engineer | Collaborator | 12 projects | Javascript, Angular, Vue js | |
| 4 | Adrian Fallow | Sales Manager | Reader | 07 projects | Sales and email marketing | |
| 5 | Helen Miller | Marketing Manager | Collaborator | 03 projects | Sales and email marketing | |
| 6 | Sarah Mitchells | Accountant | Collaborator | 01 projects | Finance and Accounting | |
| 7 | Kareem Jabbar | Accountant | Manager | 14 projects | Finance and Accounting |
If you want your table to behave responsively, use the responsive
table. To do so, add the .responsive-table class to a
Html table element. Color modifiers are also available
for the table header. Available classes are
.is-primary, .is-secondary, and
.is-accent.
| ID | Name | Role | Projects | Skills | Actions |
|---|---|---|---|---|---|
| 1 | Michael Hoffman | Engineer | 21 projects | Javascript | |
| 2 | Marjory Cambell | Sales Rep | 03 projects | Sales | |
| 3 | Kevin Smith | Engineer | 12 projects | Php | |
| 4 | Adrian Fallow | Sales Manager | 07 projects | Sales | |
| 5 | Helen Miller | Marketing Manager | 03 projects | Marketing | |
| 6 | Sarah Mitchells | Accountant | 01 project | Finance | |
| 7 | Kareem Jabbar | Accountant | 14 projects | Finance |
| ID | Name | Role | Projects | Skills | Actions |
|---|---|---|---|---|---|
| 1 | Michael Hoffman | Engineer | 21 projects | Javascript | |
| 2 | Marjory Cambell | Sales Rep | 03 projects | Sales | |
| 3 | Kevin Smith | Engineer | 12 projects | Php | |
| 4 | Adrian Fallow | Sales Manager | 07 projects | Sales | |
| 5 | Helen Miller | Marketing Manager | 03 projects | Marketing | |
| 6 | Sarah Mitchells | Accountant | 01 project | Finance | |
| 7 | Kareem Jabbar | Accountant | 14 projects | Finance |
| ID | Name | Role | Projects | Skills | Actions |
|---|---|---|---|---|---|
| 1 | Michael Hoffman | Engineer | 21 projects | Javascript | |
| 2 | Marjory Cambell | Sales Rep | 03 projects | Sales | |
| 3 | Kevin Smith | Engineer | 12 projects | Php | |
| 4 | Adrian Fallow | Sales Manager | 07 projects | Sales | |
| 5 | Helen Miller | Marketing Manager | 03 projects | Marketing | |
| 6 | Sarah Mitchells | Accountant | 01 project | Finance | |
| 7 | Kareem Jabbar | Accountant | 14 projects | Finance |
Use the device comparison table to compare app features between
devices. Add the .device-table class to a
.table element.
| Invoice editing | ||||
| Payments schedule | ||||
| Collaboration | ||||
| Permissions |
Use the feature comparison table to compare features between pricing
plans or app editions. Add the .compare-table class to
a .table element.
| STARTER | PRO | BUSINESS | ENTERPRISE | |
|---|---|---|---|---|
| Invoice editing | ||||
| Payments schedule | ||||
| Collaboration | ||||
| Permissions | ||||
| Online Storage |
