testio-tailwind 0.1.0

package/src/pages/components/test_item.haml

@@ -0,0 +1,119 @@
+---
+tags: components
+title: Test item
+---
+
+.list-test-items
+  .test-item.test-running
+    %a.test-title{href:""}
+      Test title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .test-info Test running | test ID | test type
+    %progress.progress.test-progress{value:"32", max:"100"} 32%
+    .test-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
+  .test-item.test-initialized
+    %a.test-title{href:""}
+      Test title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .test-info Test initialized | test ID | test type
+    .test-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
+  .test-item.test-stopped
+    %a.test-title{href:""}
+      Test title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .test-info Test ended | test ID | test type
+    .test-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
+  .test-item.test-locked
+    %a.test-title{href:""}
+      Test title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .test-info Test locked | test ID | test type
+    .test-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
+  .test-item.test-archived
+    %a.test-title{href:""}
+      Test title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .test-info Test failed | test ID | test type
+    .test-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
+  .test-item.test-promoted
+    %a.test-title{href:""}
+      Test title with an endless amount of delicious Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. 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.
+    .test-info Test promoted | test ID | test type with an endless amount 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.
+    .test-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
+  .test-item.test-success
+    %a.test-title{href:""}
+      Test title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .test-info Test success | test ID | test type
+    .test-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
+  .test-item.test-failed
+    %a.test-title{href:""}
+      Test title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+    .test-info Test failed | test ID | test type
+    .test-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

package/src/pages/components/tester_levels.haml

@@ -0,0 +1,70 @@
+---
+tags: components
+title: Tester level medals
+---
+
+%dl.list-inline.mb-heading
+  %dt xs medals
+  %dd
+    .list-inline
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_xs.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_2_xs.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_3_xs.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_4_xs.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_5_xs.png"}
+  %dt sm medals
+  %dd
+    .list-inline
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_sm.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_2_sm.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_3_sm.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_4_sm.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_5_sm.png"}
+  %dt md medals
+  %dd
+    .list-inline
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_md.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_2_md.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_3_md.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_4_md.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_5_md.png"}
+  %dt lg medals
+  %dd
+    .list-inline
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_lg.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_2_lg.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_3_lg.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_4_lg.png"}
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_5_lg.png"}
+%h5.mb-heading Combined with user item and profile pictures
+%dl.list-inline
+  %dt standard/md/round + xs medal
+  %dd
+    .user-item.linked
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_xs.png"}
+      %img.profile-thumb{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt sm + xs medal
+  %dd
+    .user-item.sm.linked
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_xs.png"}
+      %img.profile-thumb.sm{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt lg + sm medal
+  %dd
+    .user-item.lg.linked
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_sm.png"}
+      %img.profile-thumb.lg{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt lg square + sm medal
+  %dd
+    .user-item.lg.square.linked
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_sm.png"}
+      %img.profile-thumb.lg{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt xl + md medal
+  %dd
+    .user-item.xl
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_md.png"}
+      %img.profile-thumb.round.xl{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt xxl + md medal
+  %dd
+    .user-item.xxl
+      %img.tester-level-medal{src:"/assets/images/testerlevel-medals/medal_testerlevel_1_md.png"}
+      %img.profile-thumb.xxl{src:"/assets/images/placeholders/profile_supergirl.png"}

package/src/pages/components/user_item.haml

@@ -0,0 +1,49 @@
+---
+tags: components
+title: User item
+---
+
+%dl.list-inline
+  %dt standard
+  %dd
+    .user-item
+      %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      User item
+  %dt Linked
+  %dd
+    %a.user-item{href:"#"}
+      %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      User item linked
+  %dt With actions
+  %dd
+    %details.dropdown-actions
+      %summary
+        .user-item.linked
+          %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
+  %dt sm
+  %dd
+    .user-item.sm
+      %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      User item sm
+  %dt sm linked
+  %dd
+    %a.user-item.sm{href:"#"}
+      %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+      User item sm linked
+  %dt lg linked
+  %dd
+    .user-item.lg.linked
+      %img.profile-thumb.lg{src:"/assets/images/placeholders/profile_supergirl.png"}
+  %dt lg linked square
+  %dd
+    .user-item.lg.square.linked
+      %img.profile-thumb.lg{src:"/assets/images/placeholders/profile_supergirl.png"}
+

package/src/pages/examples/layout-actionbar.haml

@@ -0,0 +1,268 @@
+---
+layout: page-example.njk
+title: "Layout with actionbar"
+tags: "examples"
+---
+
+%main.main-content.main-content-padding
+  %h1.mb-heading Layout with actionbar
+  %section.section
+    %h4.mb-heading Structure
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+      %p .app-body
+      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
+      .bg-white.p-xs.pl-md.h-xxl .main-content
+      .bg-info.text-white.p-xs.pl-md.rounded-br .chat-container
+      .bg-petrol.text-white.p-xs.pl-md.rounded-bottom footer.actionbar
+    %h5.mt-md HTML structure
+    %code
+      &#60body class=&quotapp-body&quot&#62
+      %br
+      .ml-md &#60header class=&quotheader&quot&#62
+      .ml-md &#60main class=&quotmain-content&quot&#62
+      .ml-md &#60div class=&quotchat-container&quot&#62
+      .ml-md &#60footer class=&quotactionbar&quot&#62
+      &#60/body&quot&#62
+  %section.section
+    %h2.mb-heading Dummy Content
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+%footer.actionbar
+  %button.btn.btn-default.btn-primary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Primary
+  %button.btn.btn-default.btn-secondary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Secondary
+  %button.btn.btn-default.btn-info
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Info
+  %button.btn-intercom
+    %span.icon.icon-intercom
+.chat-container
+  %details.chat-window
+    %summary.chat-window-header
+      .chat-message-counter 999
+      %a{href:""} #123321
+      .chat-title Chat title
+      %button.btn.btn-xs.btn-ghost-inverted.btn-square
+        .icon.icon-xs.icon-cross
+    .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
+          %span 2 hours by 
+          %span.chat-author Message sender
+        .chat-message
+          Here's a short message.
+        .chat-actions
+          .btn
+            .icon.icon-heart
+      .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
+          %span 2 hours by 
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          Here's a short message which you liked.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                1
+              .popover-menu.info
+                .popover-title 1 person likes this
+                .popover-content You
+        .chat-actions
+          .btn
+            .icon.icon-heart-filled
+      .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
+          %span 2 hours by 
+          %span.chat-author Message sender
+        .chat-message
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+        .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
+      .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
+          %span 2 hours by 
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          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.
+        .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
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.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
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author You
+        .chat-message
+          Another message by you with a lot ofLorem 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.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+      .chat-message-item.announcement
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.announcement Announcement
+          %span.text-mentioned @All
+          here's an announcement 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+          .chat-message-addons
+            %a.btn{href:""} Show in chat
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+      .chat-message-item
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.mentioned You were mentioned
+          %span.text-mentioned @You
+          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+    %form.chat-window-actions
+      %textarea.form-control{rows:'1', placeholder:"Enter your message"}
+      .btn.btn-sm.btn-square.btn-primary.btn-send-message
+        %input{type:"submit", value:""}

package/src/pages/examples/layout-basic.haml

@@ -0,0 +1,28 @@
+---
+layout: page-example.njk
+title: "Layout basic"
+tags: "examples"
+---
+
+%main.main-content.main-content-padding
+  %h1.mb-heading Basic layout
+  %section.section
+    %h4.mb-heading Structure
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+      %p .app-body
+      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
+      .bg-white.p-xs.pl-md.h-xxl .main-content
+    %h5.mt-md HTML structure
+    %code
+      &#60body class=&quotapp-body&quot&#62
+      %br
+      .ml-md &#60header class=&quotheader&quot&#62
+      .ml-md &#60main class=&quotmain-content&quot&#62
+      &#60/body&quot&#62
+  %section.section
+    %h2.mb-heading Dummy Content
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
+    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur