testio-tailwind 0.1.0

package/src/pages/components/descriptionlist.haml

@@ -0,0 +1,47 @@
+---
+tags: components
+title: Description list
+---
+
+%section
+  .section-header
+    %h5.section-title list-inline
+  %dl.list-inline
+    %dt.label Label
+    %dd Content
+    %dt.label Label
+    %dd
+      .text-with-icon
+        .icon.icon-bug
+        Functional
+    %dt.label A much longer label
+    %dd A lot more content with a lot of 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. 
+    %dt.label Label
+    %dd Content
+%section.mt-md
+  .section-header
+    %h5.section-title list-inline responsive
+  %p.mb-heading
+    Add the class 
+    %code responsive 
+      to receive vertically aligned columns on smaller screens.
+  %dl.list-inline.responsive
+    %dt.label Label
+    %dd Content with a bit of Lorem ipsum dolor sit amet.
+    %dt.label Label
+    %dd
+      .text-with-icon
+        .icon.icon-bug
+        Functional
+    %dt.label A much longer label
+    %dd A lot more content with a lot of 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. 
+    %dt.label Label
+    %dd Content
+%section.mt-md
+  .section-header
+    %h5.section-title list-vertical
+  %dl.list-vertical
+    %dt.label Label
+    %dd Content
+    %dt.label Description
+    %dd Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 

package/src/pages/components/devices.haml

@@ -0,0 +1,115 @@
+---
+tags: components
+title: Devices
+---
+
+.list-devices.mb-sm
+  .device
+    .device-icon.icon-lg.icon-computer-windows-lg
+    .device-info
+      Desktop | Windows 11
+      %ul.browser-list
+        %li.icon.icon-chrome
+        %li.icon.icon-edge-chromium
+  .device
+    .device-icon.icon-lg.icon-smartphone-apple-lg
+    .device-info
+      Smartphone | iOS 11
+      %ul.browser-list
+        %li.icon.icon-chrome
+        %li.icon.icon-edge-chromium
+
+.list-devices.mb-sm
+  .device.outline
+    .device-icon.icon-lg.icon-computer-windows-lg
+    .device-info
+      Desktop | Windows 11
+      %ul.browser-list
+        %li.icon.icon-chrome
+        %li.icon.icon-edge-chromium
+    .clouddevice-info Cloud device
+  .device.outline
+    .device-icon.icon-lg.icon-computer-windows-lg
+    .device-info
+      Desktop | Windows 11
+      %ul.browser-list
+        %li.icon.icon-chrome
+        %li.icon.icon-edge-chromium
+
+.list-devices.mb-sm
+  .device-wrapper
+    .device
+      .device-icon.icon-lg.icon-computer-windows-lg
+      .device-info
+        Desktop | Windows 11
+        %ul.browser-list
+          %li.icon.icon-chrome
+          %li.icon.icon-edge-chromium
+      .clouddevice-info Cloud device
+    .device-actions
+      %a{href:""}
+        .icon-sm.icon-pencil
+      %a{href:""}
+        .icon-sm.icon-remove
+  .device-wrapper
+    .device
+      .device-icon.icon-lg.icon-computer-windows-lg
+      .device-info
+        Desktop | Windows 11
+        %ul.browser-list
+          %li.icon.icon-chrome
+          %li.icon.icon-edge-chromium
+      .clouddevice-info Cloud device
+    .device-actions
+      %a{href:""}
+        .icon-sm.icon-pencil
+      %a{href:""}
+        .icon-sm.icon-duplicate
+      %a{href:""}
+        .icon-sm.icon-remove
+
+.list-devices.mb-sm
+  .device-wrapper
+    .device
+      .device-icon.icon-lg.icon-computer-windows-lg
+      .device-info
+        Desktop | Windows 11
+        %ul.browser-list
+          %li.icon.icon-chrome
+          %li.icon.icon-edge-chromium
+    .device-actions
+      %a{href:""}
+        .icon-sm.icon-pencil
+      %a{href:""}
+        .icon-sm.icon-remove
+  .device-wrapper
+    .device
+      .device-icon.icon-lg.icon-computer-windows-lg
+      .device-info
+        Desktop | Windows 11
+        %ul.browser-list
+          %li.icon.icon-chrome
+          %li.icon.icon-edge-chromium
+    .device-actions
+      %a{href:""}
+        .icon-sm.icon-pencil
+      %a{href:""}
+        .icon-sm.icon-duplicate
+      %a{href:""}
+        .icon-sm.icon-remove
+
+.list-devices.mb-sm.p-md.bg-black
+  .device.white
+    .device-icon.icon-lg.icon-computer-windows-lg
+    .device-info
+      Desktop | Windows 11
+      %ul.browser-list
+        %li.icon.icon-chrome
+        %li.icon.icon-edge-chromium
+  .device.white
+    .device-icon.icon-lg.icon-smartphone-apple-lg
+    .device-info
+      Smartphone | iOS 11
+      %ul.browser-list
+        %li.icon.icon-chrome
+        %li.icon.icon-edge-chromium

package/src/pages/components/drawer.haml

@@ -0,0 +1,50 @@
+---
+tags: components
+title: Drawer
+---
+
+%details.drawer-wrapper
+  %summary.drawer-trigger
+    .btn.btn-primary Open Drawer      
+  .drawer
+    .drawer-header
+      .drawer-title Drawer title
+    .drawer-content
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+    .drawer-footer
+      .btn.btn-primary Primary
+      .btn.btn-secondary Secondary
+.pb-sm
+%details.drawer-wrapper
+  %summary.drawer-trigger
+    .btn.btn-primary Open Drawer with dedicated close button
+    %button.btn.btn-square.close-btn
+      .icon.icon-cross
+  .drawer
+    .drawer-header
+      .drawer-title Drawer title
+    .drawer-content
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
+    .drawer-footer
+      .btn.btn-primary Primary
+      .btn.btn-secondary.close-btn close

package/src/pages/components/drawer_filter.haml

@@ -0,0 +1,76 @@
+---
+tags: components
+title: Drawer for filtering
+---
+
+%details.drawer-wrapper
+  %summary.drawer-trigger
+    .btn.btn-primary Open Drawer      
+  .drawer
+    .drawer-header
+      .drawer-title Filter by
+      %form.form-search.direct-input.inverted
+        %input.form-control{type:'Search', placeholder:"Search for filters"}
+        %button.btn.btn-clear{type:'reset'}
+    .drawer-content
+      %section.section
+        .section-header
+          %h5.section-title Category
+        %form.form-grid.narrow
+          .form-check.sm.inverted
+            %input#check_drawer1{type:'checkbox'}
+            %label{for:'check_drawer1'} Select all/none
+          .form-check.sm.inverted
+            %input#check_drawer2{type:'checkbox'}
+            %label{for:'check_drawer2'}
+              %span.icon.icon-critical.mr-icon-spacing
+              Checkbox label
+          .form-check.sm.inverted
+            %input#check_drawer3{type:'checkbox'}
+            %label{for:'check_drawer3'}
+              %span.icon.icon-high.mr-icon-spacing
+              Checkbox label
+          .form-check.sm.inverted
+            %input#check_drawer4{type:'checkbox'}
+            %label{for:'check_drawer4'}
+              %span.icon.icon-low.mr-icon-spacing
+              Checkbox label
+          .form-check.sm.inverted
+            %input#check_drawer5{type:'checkbox'}
+            %label{for:'check_drawer5'}
+              %span.icon.icon-user-story.mr-icon-spacing
+              Checkbox label
+      %details.section-collapsable
+        %summary.section-header
+          %h5.section-title Section collapsable
+        %form.form-grid.narrow
+          .form-check.sm.inverted
+            %input#check_drawer6{type:'checkbox'}
+            %label{for:'check_drawer6'} Select all/none
+          .form-check.sm.inverted
+            %input#check_drawer7{type:'checkbox'}
+            %label{for:'check_drawer7'}
+              .user-item.sm
+                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                User item sm
+          .form-check.sm.inverted
+            %input#check_drawer8{type:'checkbox'}
+            %label{for:'check_drawer8'}
+              .user-item.sm
+                %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                User item sm
+      %details.section-collapsable
+        %summary.section-header
+          %h5.section-title Section collapsable
+        %form.form-grid.narrow
+          .form-check.sm.inverted
+            %input#check_drawer9{type:'checkbox'}
+            %label{for:'check_drawer9'} Select all/none
+          .form-check.sm.inverted
+            %input#check_drawer10{type:'checkbox'}
+            %label{for:'check_drawer10'} Checkbox label with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+      %section.section
+        %p A whole lot of 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. 
+    .drawer-footer
+      .btn.btn-primary Apply filters
+      .btn.btn-secondary.close-btn cancel

package/src/pages/components/emptystate.haml

@@ -0,0 +1,16 @@
+---
+tags: components
+title: Empty state message
+---
+.grid.gap-md.grid-cols-1{class:"md:grid-cols-3-auto"}
+  .empty-state-message Empty state message. No items here yet.
+  .empty-state-message.search Searching empty state message. No items here yet.
+  .empty-state-message.sad Sad empty state message. No items here yet.
+  .empty-state-message.smile Smiling empty state message. No items here yet.
+  .empty-state-message.deceased Deceased empty state message. No items here yet.
+  .empty-state-message.chat Chatting empty state message. No items here yet.
+  .empty-state-message.bell A cute bell telling you that there are no notifications here.
+  .empty-state-message.horizontal
+    Horizontal empty state message.
+    %br
+    No items here yet.

package/src/pages/components/index.njk

@@ -0,0 +1,7 @@
+---
+layout: base
+permalink: components/
+---
+
+{% set collection = collections.components %}
+{% include "page-with-sidebar.njk" %}

package/src/pages/components/issue-item.haml

@@ -0,0 +1,18 @@
+---
+tags: components
+title: Issue item
+---
+
+.list-issues
+  %a.issue-item{href:""}
+    .issue-icon.icon.icon-bug-reproduction.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 issue info | issue ID | issue type
+  %a.issue-item{href:""}
+    .issue-icon.icon.icon-bug-fix-confirmation.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 Cirro | #123321 | Bug Fix Confirmation
+  %a.issue-item{href:""}
+    .issue-icon.icon.icon-bug-reproduction 
+    .issue-title issue 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.
+    .issue-info issue 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.

package/src/pages/components/listitem_with_footer.haml

@@ -0,0 +1,209 @@
+---
+tags: components
+title: List-item with footer
+---
+
+.list-listitems
+  .listitem-with-footer
+    %details.listitem
+      %summary.listitem-header
+        .listitem-title List item collapsable with footer
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        .listitem-subheadline Subheadline
+        .listitem-card
+          %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+        .listitem-subheadline Subheadline
+        .listitem-card
+          %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
+          %img{src:"/assets/images/placeholders/security-jira-server.png"}
+    .listitem-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-explorative.mr-icon-spacing
+        Primary
+      %a.btn.btn-secondary.btn-block{href: ""}
+        Secondary
+      %details.dropdown-actions.dropright.dropup
+        %summary
+          .btn.btn-primary.btn-square
+            %span.icon.text-icon-default.icon-more
+        .listitem-more-menu.popover-menu
+          %a.popover-action
+            %span.icon.text-icon-default.icon-pencil
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-duplicate
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-remove
+            Action
+  .listitem-with-footer
+    %details.listitem
+      %summary.listitem-header
+        .listitem-badge
+          .icon.icon-feature
+        %a.issue-item.listitem-title{href: ""}
+          .issue-icon.icon.icon-bug-reproduction.critical
+          .issue-title Add an issue item in the header to receive an collapsable bug item with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+          .issue-info issue info | issue ID | issue type
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        %details.section-collapsable
+          %summary.section-header
+            %h5.section-title Meta info
+          %dl.list-inline
+            %dt.label Status
+            %dd
+              .text-with-icon
+                .status-icon.status-submitted
+                Submitted
+            %dt.label Bug Type
+            %dd
+              .text-with-icon
+                .icon.icon-bug
+                Functional
+            %dt.label Severity
+            %dd
+              .text-with-icon
+                .icon.icon-critical
+                Critical
+            %dt.label Known Bug
+            %dd
+              .text-with-icon
+                .icon.icon-bug-known
+                No
+            %dt.label Bug ID
+            %dd #1799709
+            %dt.label Reported on
+            %dd October 5, 2021 11:48 AM
+            %dt.label Feature
+            %dd
+              %a{href: ""} Feature name
+            %dt.label Test ID
+            %dd #88219
+            %dt.label Tester
+            %dd
+              %details.dropdown-actions
+                %summary
+                  .user-item.linked.sm
+                    %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                    User item with actions
+                .popover-menu
+                  %a.popover-action{href:'#'}
+                    %span.icon.text-icon-default.icon-user-story-test
+                    Tester profile
+                  %a.popover-action{href:'#'}
+                    %span.icon.text-icon-default.icon-review-exclamation
+                    Report tester
+        %details.section-collapsable
+          %summary.section-header
+            %h5.section-title Details
+          %dl.list-inline.responsive
+            %dt.label URL
+            %dd
+              %a{href: ""} https://www.url.com
+            %dt.label Steps
+            %dd
+              .markdown
+                %ol
+                  %li
+                    Go to
+                    %a{href: ""} https://www.url.com
+                    and login as crowd AUTOMATOR (
+                    %a{href: ""} email@qa.team
+                    \/ abc123 was in my case)
+                  %li Join a project, complete some automation task, and LEAVE the project
+                  %li
+                    Login
+                    %a{href: ""} https://www.url.com
+                    as project owner to perform review (
+                    %a{href: ""} email@qa.team
+                    \/ abc123 was in my case)
+                  %li Start to review the automated task and reject it approval
+            %dt.label Actual result
+            %dd
+              .markdown
+                %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+            %dt.label Expected result
+            %dd
+              .markdown
+                %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+        %section
+          .section-header
+            %h5.section-title Attachments
+          .attachments
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+                %img{src:'/assets/images/placeholders/bugdetails.png'}
+              %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
+              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                .attachment-icon.icon-xl.icon-review-xl
+              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+        %section
+          .section-header
+            %h5.section-title Reported on
+          .list-devices.mb-sm
+            .device
+              .device-icon.icon-lg.icon-computer-windows-lg
+              .device-info
+                Desktop | Windows 11
+                %ul.browser-list
+                  %li.icon.icon-chrome
+                  %li.icon.icon-edge-chromium
+        %section
+          .section-header
+            %h5.section-title Comments
+          .list-chat-messages
+            .chat-message-item
+              %details.dropdown-actions.chat-avatar
+                %summary
+                  .user-item.linked
+                    %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                .popover-menu
+                  %a.popover-action{href:'#'}
+                    %span.icon.icon-user-story-test
+                    Tester profile
+                  %a.popover-action{href:'#'}
+                    %span.icon.icon-review-exclamation
+                    Report tester
+              .chat-header
+                2 hours by 
+                .chat-author Message sender
+              .chat-message
+                Here's a commment, chat message or however else you want to call this kind of message.
+              .chat-actions
+                .btn
+                  .icon.icon-heart
+            .chat-message-item.your-message
+              %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+              .chat-header
+                2 hours by 
+                .chat-author You
+              .chat-message
+                Your short chat message with no lorem ipsum.
+              .chat-actions
+                %details.dropdown-actions.chat-message-actions
+                  %summary
+                    .btn
+                      .icon.icon-more
+                  .popover-menu
+                    %a.popover-action{href:'#'}
+                      %span.icon.icon-pencil
+                      Action
+                    %a.popover-action{href:'#'}
+                      %span.icon.icon-remove
+                      Action
+    .listitem-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-check.mr-icon-spacing
+        Accept
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-cross.mr-icon-spacing
+        Reject