testio-tailwind 3.21.0 → 3.23.0

package/src/pages/components/listitem_with_actionbar.haml

@@ -3,6 +3,7 @@ tags: components
 title: List-item with actionbar
 ---
 
+%p.mb-heading List items with action bars are used to provide a set of actions that can be performed on the list item. The action bar typically appears when the user hovers over or selects the list item, allowing for quick access to relevant actions.
 .list-listitems
   .listitem-with-footer
     %details.listitem

package/src/pages/components/listitem_with_footer.haml

@@ -3,6 +3,7 @@ tags: components
 title: List-item with footer
 ---
 
+%p.mb-heading List items with footers are used to provide additional actions or information related to the list item. The footer typically contains buttons or links for actions that can be performed on the item.
 .list-listitems
   .listitem-with-footer
     %details.listitem

package/src/pages/components/listitems.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item
 ---
 
+%p.mb-heading List items are used to display summarized information in lists.
 .list-listitems
   .listitem
     .listitem-title

package/src/pages/components/listitems_badge.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item badges
 ---
 
+%p.mb-heading List item badges are used to highlight or indicate specific statuses or counts associated with list items. They can be styled differently to convey various meanings, such as success, danger, or informational states.
 .list-listitems
   .listitem
     .listitem-badge

package/src/pages/components/listitems_collapsable.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item collapsable
 ---
 
+%p.mb-heading List items can be made collapsable using the HTML5 details tag. This allows users to expand and collapse additional content related to the list item as needed.
 .list-listitems
   %details.listitem
     %summary.listitem-header

package/src/pages/components/listitems_nested.haml

@@ -3,6 +3,7 @@ tags: components
 title: List items nested
 ---
 
+%p.mb-heading List items can contain nested list items, allowing for hierarchical organization of information. This is useful for displaying related data in a structured manner.
 .list-listitems
   %details.listitem
     %summary.listitem-header

package/src/pages/components/listitems_selectable.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item selectable
 ---
 
+%p.mb-heading List items can be made selectable by adding a checkbox to each item. This allows users to select one or more items from a list for further actions.
 .list-listitems
   .listitem
     .listitem-check

package/src/pages/components/loading_spinner.haml

@@ -3,6 +3,7 @@ tags: components
 title: Loading spinner
 ---
 
+%p.mb-heading Loading spinners are used to indicate that a process is ongoing. They can be customized in size and color to fit different design needs.
 .testio-loader-wrapper
   %svg.testio-loader-i{viewbox: "0 0 50 50"}
     %line.anim-bar.stroke{x1: "4px", x2: "4px", y1: "5px", y2: "45px"}

package/src/pages/components/metasidebar.haml

@@ -3,6 +3,7 @@ tags: components
 title: Metasidebar
 ---
 
+%p.mb-heading Metasidebars are used to display additional contextual information alongside the main content. They can be expanded or collapsed by the user.
 %aside.metasidebar
   %details.metasidebar-wrapper{open:"true"}
     %summary.metasidebar-btn

package/src/pages/components/modal_details.haml

@@ -1,8 +1,10 @@
 ---
 tags: components
-title: Modal - based on details tag
+title: Modal
 ---
 
+%p.mb-heading
+  Modals are used to display content in a layer above the main content. They can be opened and closed by the user, typically by clicking a button or link. They are an alternative to drawers.
 %p.mb-heading
   Add the class 
   %code.bg-gray-lighter.rounded.mx-xxs .modal-close-btn

package/src/pages/components/notifications.haml

@@ -3,7 +3,8 @@ tags: components
 title: Notifications
 ---
 
-%p.mb-heading.prose remove the classes <code>relative z-0 top-0</code> in production
+%p.mb-heading Notifications are used to inform users about important information or updates. They can replace alerts.
+%p.mb-heading Remove the classes <code>relative z-0 top-0</code> in production
 
 .notification-container.relative.top-0.z-0
   %a.notification{href:""}

package/src/pages/components/user_item.haml

@@ -3,6 +3,7 @@ tags: components
 title: User item
 ---
 
+%p.mb-heading User items are used to display user information such as profile pictures and names. They can be linked or have additional actions available.
 %dl.list-inline
   %dt standard
   %dd

package/src/pages/forms/attachments.pug

@@ -0,0 +1,71 @@
+---
+tags: forms
+title: Attachments
+---
+
+p.mb-heading Attachments components are used to display files that have been uploaded or are available for download. They can include thumbnails, file names, and action buttons such as remove.
+.attachments
+  .attachment
+    a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
+      img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+    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', alt='Bug details')
+    a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+    button.btn.btn-danger.attachment-btn
+      span.icon.text-icon-default.icon-remove
+  .attachment
+    a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+      span.attachment-icon.icon-xl.icon-review-xl
+    a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+    button.btn.btn-danger.attachment-btn
+      span.icon.text-icon-default.icon-remove
+p.my-heading Attachments can be selectable, allowing users to choose one or more files.
+.attachments
+  input(type='hidden', name='document[context_attributes][external_attachments_attachment_ids][]', value='', autocomplete='off')
+  .attachment.selectable
+    input#checkable-attachment1(data-checkboxes-target='checkbox', type='checkbox', value='89')
+    label(for="checkable-attachment1")
+      img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+    a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
+  .attachment.selectable
+    input#checkable-attachment2(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
+    label(for="checkable-attachment2")
+      img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+    a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
+  .attachment.selectable
+    input#checkable-attachment3(data-checkboxes-target='checkbox', type='checkbox', value='89')
+    label(for="checkable-attachment3")
+      .attachment-thumb
+        span.attachment-icon.icon-xl.icon-review-xl
+    a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
+  .attachment.selectable
+    input#checkable-attachment4(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
+    label(for="checkable-attachment4")
+      .attachment-thumb
+        span.attachment-icon.icon-xl.icon-review-xl
+    a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
+
+.bg-black.p-md.mt-3
+  .attachments
+    .attachment.inverted
+      a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
+        img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
+      button.btn.btn-danger.attachment-btn
+        span.icon.text-icon-default.icon-remove
+
+    .attachment.inverted
+      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+        img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+      button.btn.btn-danger.attachment-btn
+        span.icon.text-icon-default.icon-remove
+
+    .attachment.inverted
+      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+        span.attachment-icon.icon-xl.icon-review-xl
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+      button.btn.btn-danger.attachment-btn
+        span.icon.text-icon-default.icon-remove

package/src/pages/forms/checkboxes.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Checkboxes
 ---
 
+%p.mb-heading Checkboxes allow users to select one or more options from a set. They are commonly used in forms for multiple selections. We offer 2 sizes: default and small (SM).
 .form-grid.single.narrow.mb-3
   .form-check
     %input#check1{type:"checkbox", checked:"true"}

package/src/pages/forms/checkboxes_devices.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Checkboxes for devices
 ---
 
+%p.mb-heading Checkboxes styled for selecting devices.
 .form-grid.single.narrow.mb-3
   .form-check.sm
     %input#devicecheck1{type:"checkbox", checked:"true"}

package/src/pages/forms/date-time.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Date and time inputs
 ---
 
+%p.mb-heading Date and time inputs allow users to select dates and times using native browser controls.
 .form-grid
   .form-group
     %label.form-label Native date input

package/src/pages/forms/dropzone.pug

@@ -0,0 +1,38 @@
+---
+tags: forms
+title: Dropzone
+---
+
+.mb-heading
+  p.mb-xs This component uses <a href="https://www.dropzone.dev/">Dropzone.JS</a> for uploading files. You are viewing dropzone with the following configuration:
+  code
+    |  let dropzone = new Dropzone("#file-upload", {
+    br
+    |   addRemoveLinks: true,
+    |   uploadMultiple: true,
+    |   autoQueue: false,
+    |   dictCancelUpload: "",
+    |	  dictRemoveFile: ""
+    br
+    |  });
+
+.form-grid-single
+  form.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+    .dz-default.dz-message
+      p.dropzone-msg-title Click to upload a file or drag and drop
+      p.dropzone-msg-desc Files up to 10MB
+p.mt-3 Form errors example
+.form-grid-single
+  form.dropzone.field_with_errors(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+    .dz-default.dz-message
+      p.dropzone-msg-title Click to upload a file or drag and drop
+      p.dropzone-msg-desc Files up to 10MB
+  .form-hint.error
+    You made a mistake, which is why you see this form validation error message with some helpful 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.
+.bg-black.p-md.mt-3
+  .form-grid-single
+    form.dropzone.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
+      .dz-default.dz-message
+        p.dropzone-msg-title Click to upload a file or drag and drop
+        p.dropzone-msg-desc Files up to 10MB
+

package/src/pages/forms/flatpickr.haml

@@ -6,7 +6,7 @@ title: Date and time with Flatpickr
 %p.mb-xs
   This example uses 
   %a{href:"https://flatpickr.js.org/"} Flatpickr
-  %span  as a date and date-time picker replacement.
+  %span  as a date and date-time picker replacement giving more control and consistency.
 .form-grid
   .form-group
     %label.form-label Native date input

package/src/pages/forms/form-addon.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Form addon
 ---
 
+%p.mb-heading Form input fields with addons showcasing different styles.
 .form-grid
   .form-group.with-addon
     %label.form-label Input with addon

package/src/pages/forms/form-card.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Form card
 ---
 
+%p.mb-heading A card component containing a form with various input elements.
 .form-card
   .form-card-heading
     .form-card-title Form card title

package/src/pages/forms/form_grid.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Form grid
 ---
 
+%p.mb-heading Form grid layout managing the spacing between the form elements.
 .form-grid
   .bg-card.p-sm.rounded
   .bg-card.p-sm.rounded

package/src/pages/forms/form_hint.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Form hint
 ---
 
+%p.mb-heading Form input fields with various types of hints and error states.
 .form-grid
   .form-group
     %label.form-label Input with form hint

package/src/pages/forms/forms.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Forms
 ---
 
+%p.mb-heading Various form input fields showcasing different states including optional, disabled, and inverted styles.
 .form-grid
   .form-group
     %label.form-label Input

package/src/pages/forms/radiobuttons.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Radiobuttons
 ---
 
+%p.mb-heading Radiobuttons allow users to select one option from a set. They are commonly used in forms for single selections. We offer 2 sizes: default and small (SM).
 .form-grid.single.narrow.mb-3
   .form-radio
     %input#radio1{type:'radio', checked:'true', name:'radio-group', value:'1'}

package/src/pages/forms/rating_scale.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Rating scale
 ---
 
+%p.mb-heading Rating scales allow users to provide feedback, often used in surveys and assessments.
 .form-grid
   .rating-wrapper
     .rating-scale

package/src/pages/forms/search.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Search
 ---
 
+%p.mb-heading Various form input fields showcasing different states including optional, disabled, and inverted styles.
 .form-grid
   .form-group
     %label.form-label Search, direct input

package/src/pages/forms/selectable_token.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token 
 ---
 
+%p.mb-heading Selectable token components are used to make a selection from a set of options, often used in filters or multi-select scenarios.
 %ul.list-inline.flex.mb-3
   %li.selectable-token
     %input#selectabletoken1{type:"checkbox", checked:"true"}

package/src/pages/forms/selectable_token_browsers.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token for browsers
 ---
 
+%p.mb-heading Selectable token components styled for selecting browsers on different devices.
 %ul
   %li
     %p.mb-xxs Smartphone | iOS 11

package/src/pages/forms/selectable_token_lg.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token LG
 ---
 
+%p.mb-heading Large selectable tokens allow users to select options in a visually engaging way, often used for categories.
 %ul.list-inline.flex.mb-3
   %li.selectable-token.lg
     %input#selectabletokenlg1{type:"checkbox", checked:"true"}

package/src/pages/forms/selectable_token_xl.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token XL 
 ---
 
+%p.mb-heading Selectable token XL components are used to make a selection from a set of options, often used in filters or multi-select scenarios. They the most prominent selection component available.
 %ul.list-inline.flex.mb-3
   %li.selectable-token.xl
     %input#selectabletokenxl1{type:"checkbox", checked:"true"}

package/src/pages/forms/textarea.haml

@@ -3,6 +3,10 @@ tags: forms
 title: Textarea
 ---
 
+%p.mb-heading
+  Textareas are multi-line input fields that allow users to enter longer pieces of text. These examples use the 
+  %code.tag autosize
+  %span  library to automatically adjust the height of the textarea based on its content.
 .form-grid.mb-heading
   .form-group
     %label.form-label Textarea

package/src/pages/forms/toggle-buttons.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Toggle buttons 
 ---
 
+%p.mb-heading Toggle button groups allow users to select one option from a set of mutually exclusive options, styled as buttons.
 .toggle-btn-group.mb-1
   .selectable-token
     %input#radiotoggle1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}

package/src/pages/forms/toggle-switch.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Toggle switch
 ---
 
+%p.mb-heading Toggle switches allow users to turn an option on or off.
 .form-grid.single.narrow
   .form-toggle
     %label.toggle-switch{for:'toggle1active'}

package/src/pages/forms/trix_editor.pug

@@ -3,6 +3,7 @@ tags: "forms"
 title: Trix Editor
 ---
 
+p.mb-heading Trix editor is a rich text editor for everyday writing. It allows users to format text and include code snippets in a user-friendly way.
 .form-grid
   .form-group.trix-editor
     label.form-label(for='space_branding_full_description') Trix editor

package/src/pages/icons/bug-icons.haml

@@ -3,6 +3,7 @@ tags: icons
 title: Bug icons
 ---
 
+%p.mb-heading Here are bug and other issue and task related icons used throughout our applications. 
 .grid.gap-5.grid-cols-3
   %dl.list-inline
     %dd.icon.icon-functional

package/src/pages/icons/index.njk

@@ -53,20 +53,23 @@ fetchIcons(app)
       <h4 class="section-title">Icon classes</h4>
     </div>
     <div class="grid gap-5 grid-cols-3">
-      <dl class="list-inline">
-        <dd><span class="icon-xxs icon-check-circle-filled"></span></dd>
-        <dt>.icon-xxs</dt>
-        <dd><span class="icon-xs icon-check-circle-filled"></span></dd>
-        <dt>.icon-xs</dt>
-        <dd><span class="icon-sm icon-check-circle-filled"></span></dd>
-        <dt>.icon-sm</dt>
-        <dd><span class="icon icon-check-circle-filled"></span></dd>
-        <dt>.icon</dt>
-        <dd><span class="icon-lg icon-check-circle-filled"></span></dd>
-        <dt>.icon-lg</dt>
-        <dd><span class="icon-xl icon-check-circle-filled"></span></dd>
-        <dt>.icon-xl</dt>
-      </dl>
+      <div>
+        <p class="mb-2">Here are the available icon classes which control the height of the icons.</p>
+        <dl class="list-inline">
+          <dd><span class="icon-xxs icon-check-circle-filled"></span></dd>
+          <dt>.icon-xxs</dt>
+          <dd><span class="icon-xs icon-check-circle-filled"></span></dd>
+          <dt>.icon-xs</dt>
+          <dd><span class="icon-sm icon-check-circle-filled"></span></dd>
+          <dt>.icon-sm</dt>
+          <dd><span class="icon icon-check-circle-filled"></span></dd>
+          <dt>.icon</dt>
+          <dd><span class="icon-lg icon-check-circle-filled"></span></dd>
+          <dt>.icon-lg</dt>
+          <dd><span class="icon-xl icon-check-circle-filled"></span></dd>
+          <dt>.icon-xl</dt>
+        </dl>
+      </div>
       <div>
         <p class="mb-2">Some icons have additional versions which you can use with the suffix <code class="bg-gray-lighter">-lg</code> and <code class="bg-gray-lighter">-xl</code></p>
         <dl class="list-inline">
@@ -100,6 +103,7 @@ fetchIcons(app)
     <div class="section-header">
       <h4 class="section-title">Icon list</h4>
     </div>
+    <p class="mb-heading">Here's a list of all available icons contained in our iconfont.</p>
     <div class="grid grid-cols-3 gap-2 place-items-start pb-10" id="iconList"></div>
   </section>
 

package/src/pages/icons/status-icons.haml

@@ -3,6 +3,7 @@ tags: icons
 title: Status icons
 ---
 
+%p.mb-heading These status icons are used to represent various states or conditions within the complex workflow of our applications.
 %dl.list-inline
   %dd Open, Submitted
   %dl

package/src/pages/layout/app_layout.haml

@@ -3,6 +3,7 @@ tags: layout
 title: App layout structure
 ---
 
+%p.mb-heading This is the basic structure of an application layout, including header, sidebar, main content area, metasidebar, and action bar.
 .grid.gap-1px.p-xs.bg-card.rounded
   %p.mb-heading .app-body
   .p-xs.pl-md.bg-petrol-dark.text-white.rounded-t .header
@@ -16,6 +17,7 @@ title: App layout structure
       .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
 
 %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
@@ -25,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/layout/margins.haml

@@ -3,6 +3,7 @@ tags: layout
 title: Margins
 ---
 
+%p.mb-heading To provide more consistent margins throughout the application we have a range of custom spacing classes. In addition you can use everything TailWindCSS offers.
 %dl.list-inline
   %dd xxs
   %dt.flex.flex-row.bg-card

package/src/pages/layout/max_width.haml

@@ -3,9 +3,10 @@ tags: layout
 title: Max-width capped
 ---
 
+%p.mb-heading This page demonstrates the use of the .max-w-capped class to limit the maximum width of various elements for improved readability.
 .card.bg-card.p-sm.max-w-capped.mb-spacing
   %p Card with the class .max-width-capped. The card width will be capped to ensure readability. 
-%p.mb-sm.max-w-capped This class should also be applied to text elements to ensure readability in the case of 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. 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.
+%p.mb-sm.max-w-capped 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.
 .form-grid.mb-sm.max-w-capped
   .form-group
     %label.form-label Input

package/src/pages/layout/paddings.haml

@@ -3,6 +3,7 @@ tags: layout
 title: Paddings
 ---
 
+%p.mb-heading To provide more consistent padding throughout the application we have a range of custom spacing classes. In addition you can use everything TailWindCSS offers.
 %dl.list-inline
   %dd xxs
   %dt.flex.flex-row.items-start.bg-card

package/src/pages/layout/spacing.haml

@@ -3,6 +3,7 @@ tags: layout
 title: Spacing
 ---
 
+%p.mb-heading To provide more consistent spacing throughout the application we have a range of custom spacing classes. In addition you can use everything TailWindCSS offers.
 %dl.list-inline
   %dd xxs
   %dt

package/src/pages/{examples → layouts}/agenticqa_splitview.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example-agenticqa.njk
 title: "Agentic QA - Splitview"
-tags: "examples"
+tags: "layouts"
 ---
 
 %main.main-content.centered#ds-splitview-demo