- Engage C&M
- Brand
- Campus Communications
- Media & News
- Social
- Web
- Events Calendar
Organizing Text Content
Further organization and optimization of page content can make the user experience more enjoyable and helps the audience consume the content the way you intended.
Below you'll learn about creating tables and toggles, adding file downloads, list components for news feeds, and tags and filtering options.
Tables
Tables are discouraged in CLF4 as most information can be organized into columns, toggles or lists. Tables do not work well on mobile devices. If necessary, tables should only be used for research data or other data information that cannot be displayed in another way.
| Heading One | Heading Two | Heading Three |
|---|---|---|
| Item One | Item Two | Item Three |
| Item Four | Item Five | Item Six |
| Item Seven | Item Eight | Item Nine |
| Heading One | Heading Two | Heading Three |
|---|---|---|
| Item One | Item Two | Item Three |
| Item Four | Item Five | Item Six |
| Item Seven | Item Eight | Item Nine |
| Heading One | Heading Two | Heading Three |
|---|---|---|
| Item One | Item Two | Item Three |
| Item Four | Item Five | Item Six |
| Item Seven | Item Eight | Item Nine |
Best Practices
Do not use tables on a red background for readability
Try not to use tables as much as possible. Tables do not display well on mobile devices, so it’s best to find alternative ways to display your content such as columns, toggles or lists.
How to
Table without lines
1. To style a table without lines, open the table option in your text component
(See text component for other information)
2. Set the border to 0 in your table properties and select ok
Table with alternating style
1. Follow steps one to two above to remove table lines
2. Type “alternate” into the CSS Class field. This will apply an alternating zebra style to your table.
Styles:
- alternate - will convert your table to zebra style
