testio-tailwind 0.1.0

package/src/pages/components/profilethumb.haml

@@ -0,0 +1,27 @@
+---
+tags: components
+title: Profile thumbnail
+---
+
+%dl.list-inline
+  %dt profile-thumb
+  %dd
+    %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt round
+  %dd
+    %img.profile-thumb.round{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt md
+  %dd
+    %img.profile-thumb.round.md{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt sm
+  %dd
+    %img.profile-thumb.round.sm{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt lg
+  %dd
+    %img.profile-thumb.round.lg{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt xl
+  %dd
+    %img.profile-thumb.round.xl{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt xxl
+  %dd
+    %img.profile-thumb.round.xxl{src:"/assets/images/placeholders/profile_supergirl.png"}

package/src/pages/components/progress.haml

@@ -0,0 +1,23 @@
+---
+tags: components
+title: Progress bars
+---
+
+%dl.list-inline
+  %dt Progress bar
+  %dd
+    %progress.progress{value:"32", max:"100"} 32%
+  %dt Progress bar success
+  %dd
+    %progress.progress.progress-bar-success{value:"32", max:"100"} 32%
+  %dt Progress bar danger
+  %dd
+    %progress.progress.progress-bar-danger{value:"32", max:"100"} 32%
+  %dt Test progress
+  %dd
+    %progress.progress.test-progress{value:"32", max:"100"} 32%
+  %dt Progress bar thick
+  %dd
+    %progress.progress.thick{value:"32", max:"100"} 32%
+
+

package/src/pages/components/resultmodule.haml

@@ -0,0 +1,151 @@
+---
+tags: components
+title: Resultmodule
+---
+
+.result-module
+  .result-item.feature
+    .result-item-title Result title
+  .result-item.feature-passed
+    .result-item-title Result title
+  %details.result-item.feature-failed
+    %summary
+      .result-item-title Result title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-critical
+          1
+        %a.metric-item{href:""}
+          .icon.icon-high
+          1
+        %a.metric-item{href:""}
+          .icon.icon-low
+          1
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-critical
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Critical
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-high
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | High
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-low
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Low
+  %details.result-item.feature-failed
+    %summary
+      .result-item-title Result title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-critical
+          99
+        %a.metric-item{href:""}
+          .icon.icon-high
+          99
+        %a.metric-item{href:""}
+          .icon.icon-low
+          99
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-critical
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Critical
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-high
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | High
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-low
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-info #123321 | Low
+
+%h5.mb-xs.mt-md Resultmodule with User Stories
+.result-module
+  .result-item.pending
+    .result-item-title Feature title
+  .result-item.pending
+    .result-item-title Feature title
+  %details.result-item.feature
+    %summary
+      .result-item-title Feature title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-check.success
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-cross.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-blocked.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-clock
+          99
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-check.success
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-check.success
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-cross.danger
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-cross.danger
+          99
+        .metric-item
+          .icon.icon-user-outline-blocked.danger
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-clock
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-clock
+          99
+  %details.result-item.feature
+    %summary
+      .result-item-title Feature title
+      .result-item-metrics
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-check.success
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-cross.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-user-outline-blocked.danger
+          99
+        %a.metric-item{href:""}
+          .icon.icon-clock
+          99
+      .btn.collapse-btn
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-check.success
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-check.success
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-cross.danger
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-user-outline-cross.danger
+          99
+        .metric-item
+          .icon.icon-user-outline-blocked.danger
+          99
+    %a.issue-item{href:""}
+      .issue-icon.icon.icon-user-story-clock
+      .issue-title Issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+      .issue-metrics
+        .metric-item
+          .icon.icon-clock
+          99

package/src/pages/components/resultmodule_testcase.haml

@@ -0,0 +1,125 @@
+---
+tags: components
+title: Resultmodule Test Cases
+---
+
+.result-module
+  .result-header
+    .result-header-item.vertical-labels
+      .icon.icon-computer-windows
+      .label Windows 11
+    .result-header-item.vertical-labels
+      .icon.icon-computer-apple
+      .label mac OS X
+    .result-header-item.vertical-labels
+      .icon.icon-smartphone-apple
+      .label iOS X
+    .result-header-item.vertical-labels
+      .icon.icon-smartphone-android
+      .label Android X
+  %details.result-item.feature-failed
+    %summary
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+      .btn.collapse-btn
+    .result-item.testcase
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+    .result-item.testcase
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+  %details.result-item.feature-passed
+    %summary
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+      .btn.collapse-btn
+    .result-item.testcase
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+    .result-item.testcase
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+  %details.result-item.feature-failed
+    %summary
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+      .btn.collapse-btn
+    .result-item.testcase
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+    .result-item.testcase
+      .result-item-title Result title
+      .result-item-buttons
+        %a.btn{href:""}
+          .icon.icon-check-circle-filled.success
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+        %a.btn{href:""}
+          .icon.icon-cross-circle-filled.danger
+

package/src/pages/components/section_collapsable.haml

@@ -0,0 +1,25 @@
+---
+tags: components
+title: Section collapsable
+---
+
+%details.section-collapsable
+  %summary.section-header
+    %h1.section-title Section header h1
+  .card.bg-gray-lighter.p-sm Example content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+%details.section-collapsable
+  %summary.section-header
+    %h2.section-title Section header h2
+  .card.bg-gray-lighter.p-sm Example content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+%details.section-collapsable
+  %summary.section-header
+    %h3.section-title Section header h3
+  .card.bg-gray-lighter.p-sm Example content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+%details.section-collapsable
+  %summary.section-header
+    %h4.section-title Section header h4
+  .card.bg-gray-lighter.p-sm Example content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+%details.section-collapsable
+  %summary.section-header
+    %h5.section-title Section header h5
+  .card.bg-gray-lighter.p-sm Example content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

package/src/pages/components/splitview_item.haml

@@ -0,0 +1,111 @@
+---
+tags: components
+title: Splitview item
+---
+
+.splitview-list-header
+  .form-check.sm
+    %input{type:'checkbox'}
+  %h3.splitview-list-header-title 18 Bugs
+  .splitview-list-header-actions
+    %details.dropdown-actions.dropright
+      %summary
+        %a.link-with-icon{href:""}
+          .icon.icon-sort-descending
+          Severity (desc)
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-descending
+          Severity (desc)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-ascending
+          Severity (asc)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-number-ascending
+          Age (old to new)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-number-descending
+          Age (new to old)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-az
+          Title A-Z
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-za
+          Title Z-A
+    %a.linked-icon{href:""}
+      .icon.icon-filter
+    %a.linked-icon{href:""}
+      .icon.icon-search
+.splitview-list
+  .splitview-item
+    .splitview-item-checkbox.form-check.sm
+      %input{type:'checkbox'}
+    .splitview-item-icon.icon.icon-critical
+    .splitview-item-text
+      .splitview-item-title Splitview item title Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .splitview-item-metainfo
+        = "#123321321 | Product Detail Page"
+        %br
+        = "by ÜberTester | Submitted"
+  .splitview-item.selected
+    .splitview-item-checkbox.form-check.sm
+      %input{type:'checkbox'}
+    .splitview-item-icon.icon.icon-critical
+    .splitview-item-text
+      .splitview-item-title Selected splitview item title Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .splitview-item-metainfo
+        = "#123321321 | Product Detail Page"
+        %br
+        = "by ÜberTester | Submitted"
+    .splitview-item-status
+      .status-icon.status-submitted
+      .status-icon.status-manager-question
+      .status-icon.status-reproduction
+  .splitview-item
+    .splitview-item-checkbox.form-check.sm
+      %input{type:'checkbox'}
+    .splitview-item-icon.icon.icon-critical
+    .splitview-item-text
+      .splitview-item-title Splitview item title
+      .splitview-item-metainfo
+        = "#123321321 | Product Detail Page"
+        %br
+        = "by ÜberTester | Submitted"
+    .splitview-item-status
+      .status-icon.status-manager-approved
+  .splitview-item
+    .splitview-item-checkbox.form-check.sm
+      %input{type:'checkbox'}
+    .splitview-item-icon.icon.icon-critical
+    .splitview-item-text
+      .splitview-item-title Splitview item title Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .splitview-item-metainfo
+        = "#123321321 | Product Detail Page"
+        %br
+        = "by ÜberTester | Submitted"
+    .splitview-item-status
+      .status-icon.status-customer-approved
+  .splitview-item
+    .splitview-item-checkbox.form-check.sm
+      %input{type:'checkbox'}
+    .splitview-item-icon.icon.icon-critical
+    .splitview-item-text
+      .splitview-item-title Splitview item title
+      .splitview-item-metainfo
+        = "#123321321 | Product Detail Page"
+        %br
+        = "by ÜberTester | Submitted"
+    .splitview-item-status
+      .status-icon.status-customer-rejected 
+  .splitview-item
+    .splitview-item-checkbox.form-check.sm
+      %input{type:'checkbox'}
+    .splitview-item-icon.icon.icon-critical
+    .splitview-item-text
+      .splitview-item-title Splitview item title Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .splitview-item-metainfo
+        = "#123321321 | Product Detail Page"
+        %br
+        = "by ÜberTester | Submitted"
+      .list-tags
+        .tag-item.focus-group Focus-group tag

package/src/pages/components/splitview_item_collapsable.haml

@@ -0,0 +1,65 @@
+---
+tags: components
+title: Splitview item collapsable
+---
+
+.splitview-list-header
+  %h3.splitview-list-header-title 2 Executions
+  .splitview-list-header-actions
+    %details.dropdown-actions.dropright
+      %summary
+        %a.link-with-icon{href:""}
+          .icon.icon-sort-descending
+          Severity (desc)
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-descending
+          Severity (desc)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-ascending
+          Severity (asc)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-number-ascending
+          Age (old to new)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-number-descending
+          Age (new to old)
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-az
+          Title A-Z
+        %a.popover-action{href:'#'}
+          %span.icon.icon-sort-za
+          Title Z-A
+    %a.linked-icon{href:""}
+      .icon.icon-filter
+    %a.linked-icon{href:""}
+      .icon.icon-search
+.splitview-list
+  %details.splitview-group
+    %summary.splitview-item
+      .splitview-item-icon.icon.icon-circle.danger
+      .splitview-item-text
+        .splitview-item-title Splitview group title / Test Case title
+        .splitview-item-metainfo
+          = "#123321321 | Meta info"
+      .splitview-item-status
+        .splitview-item-status
+          .text-with-icon
+            .icon.icon-testcase-bug
+            2
+    .splitview-item
+      .splitview-item-icon.status-icon.status-testcase-passed
+      .splitview-item-text
+        %span.icon.icon-computer-windows.mr-icon-spacing
+        %span.icon.icon-chrome.mr-icon-spacing
+        Windows 10 | Chrome
+    .splitview-item
+      .splitview-item-icon.status-icon.status-testcase-failed
+      .splitview-item-text
+        %span.icon.icon-computer-windows.mr-icon-spacing
+        %span.icon.icon-chrome.mr-icon-spacing
+        Windows 10 | Chrome
+      .splitview-item-status
+        .text-with-icon
+          .icon.icon-testcase-bug
+          2

package/src/pages/components/tables.haml

@@ -0,0 +1,57 @@
+---
+tags: components
+title: Tables
+---
+
+%h5.mb-heading Standard table
+%table.table
+  %tr
+    %td Cell content
+    %td Cell content
+    %td Cell content
+  %tr
+    %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+
+%h5.mb-heading Table with borders and alternating rows
+%table.table.table-bordered.table-striped
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+
+%h5.mb-heading Table with header
+%table.table.table-bordered.table-striped
+  %thead
+    %th Table header
+    %th Table header
+    %th Table header
+  %tbody
+    %tr
+      %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      %td Cell content
+      %td.cell-with-buttons
+        %button.btn.btn-primary action
+    %tr
+      %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      %td Cell content
+      %td.cell-with-buttons
+        %button.btn.btn-primary action
+    %tr
+      %td Cell content
+      %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      %td.cell-with-buttons
+        %button.btn.btn-primary action

package/src/pages/components/tables_linked.haml

@@ -0,0 +1,29 @@
+---
+tags: components
+title: Tables with linked content
+---
+
+%p.mb-heading
+  Individual cells can be linked with JS. Add the class .linked-cell to highlight it on hover.
+  %br
+  If you want to highlight a whole row, but still have action buttons, use the class .highlight-parent-row.
+%table.table.table-bordered.table-striped
+  %thead
+    %th Table header
+    %th Table header
+    %th Table header
+  %tbody
+    %tr
+      %td.linked-cell{onclick: "location.href='https://test.io'"} Linked cell
+      %td.linked-cell{onclick: "location.href='https://test.io'"} Linked cell
+      %td.cell-with-buttons
+        %a.btn.btn-primary{href:"#"} action
+    %tr
+      %td.highlight-parent-row{onclick: "location.href='https://test.io'"} Highlight parent
+      %td.highlight-parent-row{onclick: "location.href='https://test.io'"} Highlight parent
+      %td.cell-with-buttons
+        %a.btn.btn-primary{href:"#"} action
+    %tr.linked-row{onclick: "location.href='https://test.io'"}
+      %td Linked row
+      %td Cell
+      %td Cell

package/src/pages/components/tags.haml

@@ -0,0 +1,12 @@
+---
+tags: components
+title: Tags
+---
+
+.list-tags
+  .tag Tag
+  .tag.sm Tag sm
+  .tag.focus-group Focus-group
+  .tag.teamleader-verified
+    .icon.icon-verify-check.mr-xxs
+    TL

package/src/pages/components/task_item.haml

@@ -0,0 +1,33 @@
+---
+tags: components
+title: Task item
+---
+
+.list-tasks
+  %a.task-item{href:""}
+    .task-icon.icon.icon-bug-reproduction.critical
+    .task-title Task title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .task-info Task info | Task ID | Task type
+  %a.task-item{href:""}
+    .task-icon.icon.icon-bug-fix-confirmation.high
+    .task-title Task title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .task-info Cirro | #123321 | Bug Fix Confirmation
+  %a.task-item{href:""}
+    .task-icon.icon.icon-bug-reproduction 
+    .task-title Task title with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    .task-info Task info with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .task-item-wrapper
+    %a.task-item{href:""}
+      .task-icon.icon.icon-critical
+      .task-title Task with action
+      .task-info Cirro | #123321 | Bug Fix Confirmation
+    %a.task-action.btn-sm{href:""}
+      .icon.icon-cross
+  .task-item-wrapper
+    %a.task-item{href:""}
+      .task-icon.icon.icon-bug-reproduction 
+      .task-title Task with action and with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .task-info Task info with endless Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %a.task-action.btn-sm{href:""}
+      .icon.icon-cross
+