Design Pattern Library - Add tables
Add tables in general to brand.ai
Example(s)
Usage
Tables are used in a variety of different places. They display a range of information which requires a need for clear separation in order to be readable. If there are more than 2 columns of information it is recommended to use a header row to identify the type of information in that column.
Header row and content row molecules include designated groups and blocks indicating columns and their 16px padding. This allows for easy content, positioning, reflowing, and scaling.
Tables are often implemented responsively, resulting in scaling column width and ultimately changing the structure to one of "content blocks". The reflow and distortion of content within columns due to increasingly less width dictates when this change to "content blocks" should happen. A viewport going below 992px
in width is generally used as the breaking point.
Dos and Dont's
|
|
---|---|
Related patterns
Pipeline table pattern makes use of this pattern.
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that text is created using text styles. When applicable used shared styles for colors. -
QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)