First draft of Lookbook docs

lookbook/docs/patterns/26-work-package-info-line.md.erb

@@ -0,0 +1,29 @@
+The work package info line is a consistent way to display the most commonly-used  set of basic work package attributes.
+
+## Anatomy
+
+The info line consists of three attributes that are displayed together:
+
+- Type
+- ID
+- Status
+
+Only the ID the only interactive element; it is clickable and points the work package. All other interaction has to come from the element using this work component.
+
+## Best practices
+
+It's best to not separate these three elements in different lines. The element can, however, be wrapped in multi-line if needed.
+
+## Used in
+
+- Hovercard
+- Work package relations tab
+- Work package header
+- ...
+
+## Technical notes
+
+
+### Code structure
+
+[CODE EXAMPLE HERE]