Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Zeplin Styleguide



 CardZeplin Documentation Layout example 
1ID3 Boardlet
coming soon
2ID3 Tabshttps://zpl.io/V17rG3k

Jira

Jira
serverJIRA
serverId629409e7-496b-3ea4-89ad-d88e06f91fde
keyGE2-805

Image Added

The boardlet is the heart of the interface. On the boardlet all the different information is aggregated and displayed. Currently the boardlet is available in 2 states, with and without Tabs. In the next subpoints you will find all information about the boardlets.

Table of Contents

Infoiconfalse

titleZeplin Documentation

here you will find the handover and the Styleguide of this componente:

Basic/1920_Boardlet_Definition
https://www.zpl.io/2jJrmBm

Basic/1920_Boardlet
https://zpl.io/2jJEGlx

The Basics.

A boardlet always consists of a title, the toolbar and a content area. In mobile breakpoints the boardlets transform into multilevel cards. These cards serve as a summary or status of the data in the boardlet. The cards can be opened and thus all data from the boardlet can be made visible in compressed form.


Breakpoints

Image Removed

1920 Default Boardlet definition

The Sizes.

All boardlets are based on the column grid of the dashboard. The minimum size of a boardlet within the Web Max Breakpoint is 4 columns. A boardlet must never be smaller than 4 columns. Each boardlet is variable in width, and the maximum is 24 columns. The boardlets must never overlap the column grid.

Image Removed
1920 Default min Boardlet 

Image Removed
1920 Default max Boardlet 

The Tabs.

Image Removed
1920 Default Boardlet with Tabs

Image Removed
1920 Default Boardlet with Tabs
Image Removed