testio-tailwind 3.22.0 → 3.23.0

package/AI_DESIGN_SYSTEM_REFERENCE.md

@@ -10,6 +10,13 @@ This document serves as a comprehensive reference for AI Agents to utilize the T
 
 ## Recent Updates (January 2026)
 
+- ✨ **Centered Layout**: New centered application layout documentation and examples
+- ✨ **Dark Mode Examples**: Comprehensive dark mode layout examples and documentation
+- ✨ **Centered Actionbar**: Added centered variant for action bars with proper styling
+- ✨ **Centered Header**: New header variant optimized for centered layouts
+- 🎨 **Layout Examples**: Added `/pages/layouts/` section with layout examples (centered, darkmode, full-width)
+- 📐 **Centered Content**: Proper max-width capped centered content containers
+- 🌙 **Dark Mode Support**: Complete dark mode documentation with implementation examples
 - ✨ **HAML Preview**: New HAML preview functionality for live component viewing
 - ✨ **HAML Converter**: Added HAML conversion utility for template processing
 - ✨ **AI Documentation**: Comprehensive AI documentation across all component pages
@@ -32,23 +39,24 @@ This document serves as a comprehensive reference for AI Agents to utilize the T
 3. [Color System](#color-system)
 4. [Typography](#typography)
 5. [Spacing & Layout](#spacing--layout)
-6. [Button Components](#button-components)
-7. [Card Components](#card-components)
-8. [Form Components](#form-components)
-9. [Overlay Components (Modal & Drawer)](#overlay-components-modal--drawer)
-10. [Page Layout Components](#page-layout-components)
-11. [Navigation Components](#navigation-components)
-12. [Feedback Components](#feedback-components)
-13. [Data Display Components](#data-display-components)
-14. [List Components](#list-components)
-15. [Splitview Components](#splitview-components)
-16. [Chat Components](#chat-components)
-17. [Chart Components](#chart-components)
-18. [Status & Progress Components](#status--progress-components)
-19. [Utility Components](#utility-components)
-20. [AgenticQA Components](#agenticqa-components)
-21. [Dark Mode](#dark-mode)
-22. [Best Practices for AI Agents](#best-practices-for-ai-agents)
+6. [Layout Patterns](#layout-patterns)
+7. [Button Components](#button-components)
+8. [Card Components](#card-components)
+9. [Form Components](#form-components)
+10. [Overlay Components (Modal & Drawer)](#overlay-components-modal--drawer)
+11. [Page Layout Components](#page-layout-components)
+12. [Navigation Components](#navigation-components)
+13. [Feedback Components](#feedback-components)
+14. [Data Display Components](#data-display-components)
+15. [List Components](#list-components)
+16. [Splitview Components](#splitview-components)
+17. [Chat Components](#chat-components)
+18. [Chart Components](#chart-components)
+19. [Status & Progress Components](#status--progress-components)
+20. [Utility Components](#utility-components)
+21. [AgenticQA Components](#agenticqa-components)
+22. [Dark Mode](#dark-mode)
+23. [Best Practices for AI Agents](#best-practices-for-ai-agents)
 
 ---
 
@@ -145,10 +153,17 @@ src/pages/
 │   ├── spacing.haml
 │   ├── paddings.haml
 │   ├── margins.haml
-│   └── max_width.haml
+│   ├── max_width.haml
+│   ├── centered_layout.haml     # Centered layout documentation
+│   └── darkmode.haml            # Dark mode layout documentation
+├── layouts/             # Full layout examples
+│   ├── layout-full.haml
+│   ├── layout-centered.haml     # Centered layout example
+│   └── layout-darkmode.haml     # Dark mode layout example
 ├── navigation/          # Navigation components
 │   ├── header.haml
 │   ├── header_*.haml    # Portal-specific headers
+│   ├── header-centered.haml     # Centered layout header
 │   ├── sidebar.haml
 │   ├── sidebar_*.haml   # Portal-specific sidebars
 │   ├── tabnavigation.haml
@@ -181,9 +196,27 @@ npm start
 # Visit: http://localhost:8080/forms/
 # Visit: http://localhost:8080/tables/
 # Visit: http://localhost:8080/charts/
+# Visit: http://localhost:8080/layout/
 ```
 
-#### 2. **HAML to HTML Reference**
+#### 2. **Layout Examples**
+Complete layout examples with live previews:
+```
+# Full-width layout example
+http://localhost:8080/pages/layouts/layout-full
+
+# Centered layout example (recommended for documentation and forms)
+http://localhost:8080/pages/layouts/layout-centered
+
+# Dark mode layout example
+http://localhost:8080/pages/layouts/layout-darkmode
+```
+
+**Layout Documentation:**
+- [centered_layout.haml](src/pages/layout/centered_layout.haml) - Centered layout structure and documentation
+- [darkmode.haml](src/pages/layout/darkmode.haml) - Dark mode implementation guide
+
+#### 3. **HAML to HTML Reference**
 
 ```haml
 <!-- HAML -->
@@ -339,6 +372,88 @@ xl: 90rem (1440px)
 
 ---
 
+## Layout Patterns
+
+### Standard Application Layout Structure
+The application uses a consistent layout structure across all pages:
+
+```html
+<body class="app-body">
+  <header class="header">
+    <!-- Navigation and branding -->
+  </header>
+  <main class="main-content">
+    <!-- Page content -->
+  </main>
+  <footer class="actionbar">
+    <!-- Actions and controls -->
+  </footer>
+</body>
+```
+
+### Full-Width Layout
+Standard layout with content spanning the full width of the viewport:
+
+```html
+<body class="app-body">
+  <header class="header">
+    <!-- Full-width header -->
+  </header>
+  <main class="main-content">
+    <div class="page-content">
+      <!-- Content fills available space -->
+    </div>
+  </main>
+  <footer class="actionbar">
+    <!-- Full-width footer -->
+  </footer>
+</body>
+```
+
+**Use Case:** Dashboard layouts, full-width data displays, and responsive mobile views.
+
+### Centered Layout
+Centered layout with max-width constraints for optimal readability on widescreen screens:
+
+```html
+<body class="app-body">
+  <header class="header">
+    <!-- Centered header -->
+  </header>
+  <main class="main-content centered">
+    <div class="centered-content">
+      <!-- Content centered with max-width -->
+    </div>
+  </main>
+  <footer class="actionbar centered">
+    <!-- Centered footer -->
+  </footer>
+</body>
+```
+
+**Key Classes:**
+- `.main-content.centered` - Centers the main content
+- `.centered-content` - Wrapper for centered content with max-width constraint
+- `.actionbar.centered` - Centered variant of action bar
+
+**Use Case:** Documentation pages, information displays, form submissions, and content with optimal line length requirements.
+
+**Max-Width Values:**
+- `.max-w-capped` - Standard max-width for centered content (typically 800px)
+- Ensures readability on widescreen displays while maintaining responsive behavior
+
+**Example Centered Actionbar:**
+```html
+<footer class="actionbar centered">
+  <div class="flex justify-center gap-md">
+    <button class="btn btn-secondary">Cancel</button>
+    <button class="btn btn-primary">Submit</button>
+  </div>
+</footer>
+```
+
+---
+
 ## Button Components
 
 ### Basic Buttons
@@ -2236,7 +2351,34 @@ Product-specific components for the AgenticQA platform.
 
 ## Dark Mode
 
-The design system includes comprehensive dark mode support with customized theme variables.
+The design system includes comprehensive dark mode support with customized theme variables and a centered layout variant for dark mode displays.
+
+### Enabling Dark Mode
+
+```html
+<!-- Apply dark class to body or container -->
+<body class="app-body dark">
+  <!-- All dark mode styles will be applied -->
+</body>
+```
+
+### Dark Mode Layout Structure
+
+```html
+<body class="app-body dark">
+  <header class="header">
+    <!-- Dark mode header -->
+  </header>
+  <main class="main-content centered">
+    <div class="centered-content">
+      <!-- Centered content with dark mode styling -->
+    </div>
+  </main>
+  <footer class="actionbar centered">
+    <!-- Centered actionbar for dark mode -->
+  </footer>
+</body>
+```
 
 ### Dark Mode Color Palette
 ```css
@@ -2282,14 +2424,56 @@ The design system includes comprehensive dark mode support with customized theme
 <div class="bg-card dark:bg-listitem">
   <!-- Light mode: #e6e6e6, Dark mode: #262626 -->
 </div>
+
+<!-- Buttons with dark mode -->
+<div class="dark">
+  <button class="btn btn-primary">
+    <!-- Automatically styled for dark mode -->
+  </button>
+</div>
 ```
 
-### Dark Mode Differences
+### Dark Mode Layout Examples
+
+**Centered Dark Mode Layout:**
+- Optimal for documentation or form-based interfaces
+- Content is centered with max-width constraint
+- Footer actionbar is also centered
+- View live example: `/pages/layouts/layout-darkmode`
+
+**Dark Mode with Forms:**
+- Form controls are optimized for dark backgrounds
+- Input fields have proper contrast
+- Labels and hints are readable
+- Error states are clearly visible
+
+### Dark Mode Differences from Light Mode
 - Border radius: `5px` → `12px`
 - Grid gutters: `20px` → `40px`
 - Table cell padding: `py-xs` → `py-md`
 - Chat layout: 3 columns → 2 columns (actions hidden)
-- Link colors: Petrol → Purple, Hover: Blue → Dark Purple
+- Link colors: Petrol → Purple (#8988eb), Hover: Dark Purple (#7954ff)
+- Text color: System colors → Light gray (#f2f2f2)
+- Font sizes: Labels reduced to 0.75rem (from 0.8125rem)
+- Card headers: 1.125rem in dark mode
+
+### Dark Mode Best Practices
+
+1. **Testing Dark Mode**
+   - Always preview components with the `.dark` class applied
+   - Test contrast ratios for accessibility compliance
+   - Verify all interactive elements are clearly visible
+
+2. **Component-Specific Adjustments**
+   - Buttons: Use inverted variants for dark backgrounds
+   - Cards: Ensure sufficient contrast with dark background
+   - Text: Use light colors for readability
+   - Borders: Use subdued colors that don't overpower the dark background
+
+3. **Dark Mode CSS Utilities**
+   - Use Tailwind's `dark:` prefix for conditional dark mode styles
+   - Example: `bg-white dark:bg-gray-800`
+   - Combine with custom CSS variables for consistency
 
 ---
 
@@ -2302,6 +2486,7 @@ The design system includes comprehensive dark mode support with customized theme
    - Apply layout classes: `header`, `sidebar`, `main`, `section`
    - Use grid or flex utilities for responsive layouts
    - Consider using `.page-header` for dashboard pages
+   - Choose between standard full-width or centered layout
 
 2. **Component Selection**
    - Choose the appropriate component variant for the use case
@@ -2320,29 +2505,40 @@ The design system includes comprehensive dark mode support with customized theme
    - Include alt text for images
    - Use `<label>` elements with `for` attributes
 
-5. **Dark Mode Considerations**
+5. **Layout Pattern Selection**
+   - **Full-Width Layout**: Use for dashboards and data displays
+   - **Centered Layout**: Use for documentation and forms
+   - Both support dark mode with proper styling
+   - Choose based on content type and readability requirements
+
+6. **Dark Mode Considerations**
    - Always test components with `.dark` class applied
    - Border radius is larger in dark mode (12px vs 5px)
    - Grid gutters are larger in dark mode (40px vs 20px)
    - Use `dark:` prefix for conditional dark mode styles
+   - Ensure sufficient contrast for readability
+   - Test with actual dark mode enabled in browsers
 
-6. **Form Best Practices**
+7. **Form Best Practices**
    - Use `.form-grid` for form layouts
    - Apply `.form-group` wrapper around each field
    - Use `.form-hint` for helper text
    - Use `.field_with_errors` for validation states
+   - Forms work well in both centered and full-width layouts
 
-7. **Table Best Practices**
+8. **Table Best Practices**
    - Use `.table` for standard data tables
    - Use `.table-standard` for key-value style tables
    - Use `.table-cellstyle` for status tracking tables
    - Use `.action-cell` for right-aligned action buttons
+   - Tables automatically adapt to dark mode
 
-8. **Page Header Best Practices**
+9. **Page Header Best Practices**
    - Use `.page-header` for dashboard/session pages
    - Main card should have `.page-maincard` and `p-card-padding`
    - Add `.with-chart` modifier when including charts
    - Actions go in `.page-actions`
+   - Supports dark mode styling
 
 ---
 
@@ -2351,13 +2547,28 @@ The design system includes comprehensive dark mode support with customized theme
 ### Version 3.22.0 - January 2026
 
 **New Features:**
-- HAML Preview functionality for live component viewing
-- HAML Converter utility for template processing
-- Comprehensive AI documentation across all component pages
+- ✨ Centered layout documentation and examples for improved readability
+- ✨ Dark mode layout examples and enhanced dark mode documentation
+- ✨ Centered actionbar variant for dark mode and standard layouts
+- ✨ Centered header styling for consistent layout patterns
+- ✨ HAML Preview functionality for live component viewing
+- ✨ HAML Converter utility for template processing
+- ✨ Comprehensive AI documentation across all component pages
 
 **Enhancements:**
-- All component pages now include descriptions and use cases
-- Enhanced form component documentation (checkboxes, radios, toggles)
+- 📐 New layout patterns section with centered and full-width examples
+- 🌙 Enhanced dark mode documentation with implementation examples
+- 📋 All component pages now include descriptions and use cases
+- 🎯 Updated layout documentation with max-width constraints
+- 🎨 Form and table components optimized for dark mode
+- 📝 Added layout selection guidelines for AI agents
+
+**Layout Updates:**
+- Added `/pages/layouts/layout-centered` for centered layout examples
+- Added `/pages/layouts/layout-darkmode` for dark mode examples
+- Added `/pages/layout/centered_layout.haml` documentation
+- Added `/pages/layout/darkmode.haml` documentation
+- Added `/pages/navigation/header-centered.haml` for centered headers
 - Improved layout documentation with examples
 - Typography pages updated with link and icon examples
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.22.0",
+	"version": "3.23.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/_includes/example-header-centered.njk

@@ -0,0 +1,53 @@
+<header class="header centered">
+
+    <div class="header-wrapper">
+        <div class="navlinks logo-wrapper"><a class="navlink header-logo" href="#"></a></div> 
+        <div class="navlinks left">
+            <a class="navlink active" href="#">Navlink active</a>
+            <a class="navlink" href="#">Navlink</a>
+            <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+            <details class="header-dropdown">
+                <summary class="navlink">Collapsable</summary>
+                <div class="dropdown-menu">
+                    <a class="navlink active" href="#">Navlink active</a>
+                    <a class="navlink" href="#">Navlink</a>
+                    <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+                </div>
+            </details>
+        </div>
+        <details class="mobile-links">
+            <summary class="mobile-menu-btn">
+                <div class="navlink"><span class="sr-only">Open main menu</span><span class="text-icon-default icon icon-menu" aria-hidden="true"></span></div>
+            </summary>
+            <div class="mobile-menu sidebar">
+                <a class="navlink active" href="#">Navlink active</a>
+                <a class="navlink" href="#">Navlink</a>
+                <a class="navlink" href="#"><span class="icon icon-check-circle-filled"></span>Navlink</a>
+                <details class="header-dropdown">
+                    <summary class="navlink">Collapsable</summary>
+                    <div class="dropdown-menu">
+                        <a class="navlink active" href="#">Navlink active</a>
+                        <a class="navlink" href="#">Navlink</a>
+                        <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+                    </div>
+                </details>
+            </div>
+        </details>
+        <div class="navlinks right">
+            <details class="header-dropdown user-menu" href="#">
+                <summary class="btn-profile navlink">
+                    <img class="user-profile" src="/assets/images/placeholders/profile_supergirl.png">
+                    <div class="user-details">
+                        <div class="profile-role">Admin</div>
+                        <div class="profile-name">Anja Berger</div>
+                    </div>
+                </summary>
+                <div class="dropdown-menu profile-dropdown">
+                    <a class="dropdown-link" href="#"><span class="icon icon-user text-icon-default mr-icon-spacing"></span>Your Profile</a>
+                    <a class="dropdown-link" href="#"><span class="icon icon-cog text-icon-default mr-icon-spacing"></span>Settings</a>
+                    <a class="dropdown-link" href="#"><span class="icon icon-shutdown text-icon-default mr-icon-spacing"></span>Sign out</a>
+                </div>
+            </details>
+        </div>
+    </div>
+</header>

package/src/_layouts/page-example-centered.njk

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include "head.njk" %}
+
+  <body class="app-body">
+    {% include "header.njk" %}
+
+    {% block content %}
+      <main class="page-example-container">
+        <div class="app-body">
+          {% include "example-header-centered.njk" %}
+          {{ content | safe }}
+        </div>
+      </main>
+    {% endblock %}
+  
+  </body>
+  {% include "footer-scripts.njk" %}
+</html>

package/src/_layouts/page-example-darkmode.njk

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include "head.njk" %}
+
+  <body class="app-body dark">
+    {% include "header.njk" %}
+
+    {% block content %}
+      <main class="page-example-container">
+        <div class="app-body">
+          {% include "example-header.njk" %}
+          {{ content | safe }}
+        </div>
+      </main>
+    {% endblock %}
+  
+  </body>
+  {% include "footer-scripts.njk" %}
+</html>

package/src/assets/stylesheets/components/actionbar.css

@@ -39,3 +39,11 @@ footer.actionbar summary > .btn,
 .splitview-details-actionbar summary > .btn {
   @apply mr-0;
 }
+
+footer.actionbar.centered {
+  @apply justify-center;
+}
+
+footer.actionbar.centered .content-wrapper {
+  @apply flex justify-between w-full max-w-centered-content;
+}

package/src/assets/stylesheets/components/header.css

@@ -225,4 +225,26 @@ details[open].header-dropdown .dropdown-menu.profile-dropdown {
   -webkit-transform: translateX(20px);
   -ms-transform: translateX(20px);
   transform: translateX(20px);
+}
+
+/* Centered header */
+
+.header.centered {
+  @apply justify-center sm:px-body-padding-tablet xl:px-body-padding-desktop;
+}
+
+.header.centered .header-wrapper {
+  @apply flex justify-between items-center w-full max-w-centered-content;
+}
+
+.header.centered .logo-wrapper {
+  @apply w-auto -ml-xs;
+}
+
+.header.centered .navlinks.left {
+  @apply px-spacing;
+}
+
+.header.centered .navlinks.right {
+  @apply pr-0;
 }

package/src/pages/layout/app_layout.haml

@@ -27,4 +27,6 @@ title: App layout structure
   .ml-md &#60main class=&quotmain-content&quot&#62
   .ml-md &#60aside class=&quotmetasidebar&quot&#62
   .ml-md &#60footer class=&quotactionbar&quot&#62
-  &#60/body&quot&#62
+  &#60/body&quot&#62
+%p.my-heading Take a look at the layout in action:
+%a.btn.btn-primary{ href: "/pages/layouts/layout-full"} Layout example

package/src/pages/layout/centered_layout.haml

@@ -0,0 +1,26 @@
+---
+tags: layout
+title: Centered layout
+---
+
+%p.mb-heading This is the structure of a centered application layout. In this layout all elements are centered and have a max-width to ensure optimal readability on widescreen resolutions.
+.grid.gap-1px.p-xs.bg-card.rounded.centered.text-center
+  %p.mb-heading .app-body
+  .p-xs.pl-md.bg-petrol-dark.text-white.rounded-t .header
+  .bg-white.p-md.flex.flex-col.items-center
+    %p.mb-heading .main-content.centered
+    .bg-gray-light.py-md.max-w-capped.w-full .centered-content
+  .bg-petrol.text-white.p-xs.pl-md.rounded-b footer.actionbar.centered
+
+%h5.mt-md HTML structure
+%p.mb-heading The following code snippet illustrates the HTML structure of the app layout components:
+%code
+  &#60body class=&quotapp-body&quot&#62
+  %br
+  .ml-md &#60header class=&quotheader&quot&#62
+  .ml-md &#60main class=&quotmain-content centered&quot&#62
+  .ml-lg &#60div class=&quotcentered-content&quot&#62
+  .ml-md &#60footer class=&quotactionbar&quot&#62
+  &#60/body&quot&#62
+%p.my-heading Take a look at the layout in action:
+%a.btn.btn-primary{ href: "/pages/layouts/layout-centered"} Layout example

package/src/pages/layout/darkmode.haml

@@ -0,0 +1,9 @@
+---
+tags: layout
+title: Darkmode
+---
+
+%p.mb-heading To use dark mode, add the class <code>dark</code> to the <code>body</code> element. 
+&#60body class=&quotapp-body dark&quot&#62
+%p.my-heading Take a look at the layout in action:
+%a.btn.btn-primary{ href: "/pages/layouts/layout-darkmode"} Layout example

package/src/pages/layouts/layout-centered.haml

@@ -0,0 +1,26 @@
+---
+layout: page-example-centered
+title: "Centered"
+tags: "layouts"
+---
+
+%main.main-content.centered
+  .centered-content
+    %h1.mb-heading Layout Centered
+    %p This layout centers the content within the viewport, providing a focused and balanced design. It is ideal for pages where it's not necessary to utilize the full width of widescreen resolutions.
+    %p Make sure to use a header and actionbar with centered content to align all elements properly.
+    .card.mt-md
+      .card-body Example card to illustrate the width of the centered layout.
+%footer.actionbar.centered
+  .content-wrapper
+    %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

package/src/pages/layouts/layout-darkmode.haml

@@ -0,0 +1,310 @@
+---
+layout: page-example-darkmode.njk
+title: "Darkmode"
+tags: "layouts"
+---
+
+%nav.sidebar{arialabel:'Sidebar'}
+  %a.navlink.active{href:'#'}
+    %span.navlink-badge.icon.icon-home
+    Navlink active
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug
+    Navlink
+  %details
+    %summary.navlink-container
+      .navlink
+        %span.navlink-badge.icon.icon-product
+        Navlink collapsable
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug-reproduction
+    Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
+%main.main-content.main-content-padding
+  %h1.mb-heading Darkmode example
+  %p.mb-heading This is a layout that includes a sidebar for navigation, a metasidebar for additional information or actions, and an actionbar at the bottom for primary actions. In addition to these elements, it also features a chat container for real-time communication. This layout is ideal for applications that require multiple interactive components while maintaining a clean and organized interface.
+  %section.section
+    .grid.gap-1px.p-xs.bg-gray-lightest.rounded
+      %p .app-body
+      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
+      .grid.grid-cols-2-auto-fr.gap-1px
+        .bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar
+        .grid.gap-1px
+          .grid.grid-cols-2-fr-auto
+            .bg-white.p-xs.pl-md.h-xxl .main-content
+            .bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
+          .bg-info.text-white.p-xs.pl-md.rounded-br .chat-container
+          .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
+    %h5.mt-md HTML structure
+    %code
+      &#60body class=&quotapp-body&quot&#62
+      %br
+      .ml-md &#60header class=&quotheader&quot&#62
+      .ml-md &#60nav class=&quotsidebar&quot&#62
+      .ml-md &#60main class=&quotmain-content&quot&#62
+      .ml-md &#60aside class=&quotmetasidebar&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
+%aside.metasidebar
+  %details.metasidebar-wrapper{open:"true"}
+    %summary.metasidebar-btn
+    .metasidebar-content
+      %h2.metasidebar-title Metasidebar title
+      %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
+      %h3.metasidebar-subheading Metasidebar subheading
+      %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 action
+  %button.btn.btn-default.btn-secondary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Secondary action
+  %button.btn-intercom
+    .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/navigation/header-centered.haml

@@ -0,0 +1,77 @@
+---
+tags: navigation
+title: Centered header
+---
+
+%p.mb-heading Header component with centered elements.
+%nav.header.centered
+  .header-wrapper
+    .navlinks.logo-wrapper
+      %a.navlink.header-logo{href:'#'}
+    .navlinks.left
+      %a.navlink.active{href:'#'} Navlink active
+      %a.navlink{href:'#'} Navlink
+      %a.navlink{href:'#'}
+        %span.icon.icon-check-circle-filled 
+        %span Navlink
+      %details.header-dropdown
+        %summary.navlink Collapsable
+        .dropdown-menu
+          %a.navlink{href:'#', role:'menuitem'}
+            %span.icon.icon-user  
+            Dropdown-item
+          %a.navlink{href:'#', role:'menuitem'}
+            %span.icon.icon-cog  
+            Dropdown-item
+          %a.navlink{href:'#', role:'menuitem'}
+            %span.icon.icon-shutdown 
+            Dropdown-item with a longer text to see how things break and behave
+      %a.navlink.responsive-label{href:'#'}
+        %span.icon.icon-check-circle-filled 
+        %span Responsive label
+    %details.mobile-links
+      %summary.mobile-menu-btn
+        .navlink
+          %span.sr-only Open main menu
+          %span.icon.icon-menu{ariahidden:'true'}
+      .mobile-menu.sidebar
+        %a.navlink.active{href:'#'}
+          %span.navlink-badge.icon.icon-home
+          Navlink active
+        %a.navlink{href:'#'}
+          %span.navlink-badge.icon.icon-plus
+          Add project
+        %details
+          %summary.navlink
+            %span.icon.icon-product
+            Collapsable
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink.active{href:'#'}
+            %span.icon.icon-test
+            Active child
+    .navlinks.right
+      %details.header-dropdown.user-menu
+        %summary.btn-profile.navlink
+          %span.sr-only Open user menu
+          %img.user-profile{src:'/assets/images/placeholders/profile_supergirl.png', alt:''}
+          .user-details
+            .profile-role Admin
+            .profile-name Anja Berger
+        .dropdown-menu.profile-dropdown{role:'menu', ariaorientation:'vertical', arialabelledby:'user-menu'}
+          %a.dropdown-link{href:'#', role:'menuitem'}
+            %span.icon.icon-user  
+            Your Profile
+          %a.dropdown-link{href:'#', role:'menuitem'}
+            %span.icon.icon-cog  
+            Settings
+          %a.dropdown-link{href:'#', role:'menuitem'}
+            %span.icon.icon-shutdown
+            Sign out