The Table section displays structured data in a clear grid—from classic headers and two-column parameters to wider views with horizontal scrolling on mobile devices. You can highlight selected rows with an info box (note, tip, warning) so that important rules don’t get lost in dense text.
This page showcases all the features of the Table module—visual styles, additional elements below the table, and various data options.
Table styles
Additional elements below the table
Data Plans
Minimalist appearance without visible lines between rows. Suitable for simple lists or when you want a clean design without visual noise.
| Format | Size | Usage |
|---|---|---|
| Business card | 90 × 50 mm | Standard European business card |
| Letterhead A4 | 210 × 297 mm | Business correspondence |
| DL envelope | 220 × 110 mm | For folded A4 letter |
Horizontal lines between rows make it easier to follow data in multi-row tables. Ideal for overviews with many records.
| Channel | Primary format | Secondary format |
|---|---|---|
| Web | WebP | PNG |
| JPG | PNG | |
| PDF/X-4 | TIFF | |
| Social media | MP4 | JPG |
Vertical lines between columns visually separate individual data categories. Suitable for tables with clearly distinct data types in each column.
| Device | Minimum resolution | Recommended resolution |
|---|---|---|
| Desktop | 1280 × 720 px | 1920 × 1080 px |
| Tablet | 768 × 1024 px | 1024 × 1366 px |
| Mobile | 375 × 667 px | 428 × 926 px |
Complete borders around all cells create a classic table grid. Maximum clarity for technical data or complex structures.
| File type | Colour space | Resolution | Compression |
|---|---|---|---|
| Web logo | sRGB | 72 dpi | Lossless |
| Print logo | CMYK | 300 dpi | None |
| Web photo | sRGB | 72 dpi | Lossy (80%) |
| Print photo | CMYK | 300 dpi | None |
Expandable content (accordion) allows you to hide detailed information that users reveal by clicking. Ideal for frequently asked questions or detailed explanations.
| Abbreviation | Meaning | Example use |
|---|---|---|
| PMS | Pantone Matching System | Spot colours for print |
| CMYK | Cyan, Magenta, Yellow, Key | Four-colour printing |
| HEX | Hexadecimal code | Web colours |
| RGB | Red, Green, Blue | Digital display |
A spot colour is a special colour mixed from a single pigment, unlike process colours (CMYK), which are created by combining four base colours. Spot colours ensure consistent colour reproduction regardless of printing equipment. In the Pantone system, each colour has a unique number (e.g. PMS 185 C).
Use RGB for all digital outputs – web, email, social media, on-screen presentations. CMYK is exclusively for print – flyers, business cards, posters, catalogues. Colour shifts may occur when converting from RGB to CMYK, so always use the correct colour profile from the project start.
Ask the printer for a proof on actual material. For spot colours, use a current Pantone swatch book (swatch books age and colours fade). For digital preview, calibrate your monitor according to an ICC profile.
Text below the table provides additional context, explains abbreviations, or references further information sources.
| Output | Min. resolution | Max. file size |
|---|---|---|
| Profile photo | 400 × 400 px | 500 KB |
| Feed post | 1080 × 1080 px | 2 MB |
| Stories / Reels | 1080 × 1920 px | 4 MB |
| Cover photo | 1640 × 624 px | 1 MB |
Values in the table are valid for 2024. Social platforms continuously change their specifications – verify current values in the official platform documentation. Additional length and framerate restrictions apply to video content.
This section demonstrates a combination of all available elements – buttons, expandable content, and text below the table in a single module.
When using multiple additional elements, maintain clarity. Not all options need to be used at once.
| Document | Purpose | Updates |
|---|---|---|
| Brand Book | Complete brand manual | Annually |
| Quick Start Guide | Condensed guide for partners | As needed |
| Asset Library | Repository of all assets | Continuously |
The Brand Book is intended for internal teams and certified partners. External vendors receive the Quick Start Guide. For access to the full version, contact the brand manager.
The Brand Book undergoes revision once a year. The Asset Library is updated continuously – new assets are added within 48 hours of approval. File versions are marked with a date in the filename.
All documents are available in PDF formats and as an interactive web version. For printing, use PDF versions with crop marks exclusively.
Two columns work well as "property name → concrete value". Common for technical specs, contacts, or a quick style summary.
| Property | Value |
|---|---|
| Primary typeface | See the Fonts section in this manual |
| Web colour space | sRGB |
| Print colour space | Per vendor ICC profile |
| Questions contact | brand@company.com |
The section supports any number of columns—the more you add, the narrower cells become on small screens (handled with horizontal scrolling). The sample below mimics an outputs overview across channels.
Wide tables automatically scroll horizontally on mobile.
| Deliverable | Resolution / size | Aspect ratio | File format | Max length / weight |
|---|---|---|---|---|
| Primary web banner | 1920 × 600 px | 16:5 | WebP / JPG | up to 250 KB |
| Instagram post | 1080 × 1080 px | 1:1 | JPG / MP4 | video up to 60 s |
| LinkedIn cover | 1584 × 396 px | 4:1 | JPG / PNG | static image only |
| Printed roll-up | 850 × 2000 mm | — | Press-ready PDF | fonts outlined |
Cells can hold full sentences or short paragraphs. Use this when you want to keep related information column-shaped without splitting it across multiple sections.
| Topic | Guidance for teams |
|---|---|
| Voice and tone | We keep communication direct and calm. Avoid jargon unless the audience is specialist. Campaigns may add light humour, but never at the expense of clarity. |
| Illustration | Prefer simple shapes and a tight palette derived from primary brand colours. Complex photorealistic composites appear only on product batches approved by marketing. |