hashicorp · majedelass · Jul 17, 2025 · Jul 15, 2025 · Jul 15, 2025 · Jul 16, 2025
@@ -33,6 +33,7 @@ navigation:
 <section data-tab="Specifications">
   @include "partials/specifications/anatomy.md"
   @include "partials/specifications/states.md"
+  @include "partials/specifications/spacing.md"
 </section>
 
 <section data-tab="Accessibility">

@@ -0,0 +1,5 @@
+## Spacing
+
+The gap between the breadcrumb and dropdown menu when opened is 4px.
+
+![](/assets/components/breadcrumb/breadcrumb-truncated-dropdown-spacing.png)
@@ -53,4 +53,4 @@ We recommend the following spacing options for cards:
 - 16px all around
 - 24px all around
 - 16px top/bottom; 24px left/right
-- 24px top/bottom; 16px left/right
+- 24px top/bottom; 16px left/right
@@ -39,6 +39,7 @@ status:
 
 <section data-tab="Specifications">
   @include "partials/specifications/anatomy.md"
+  @include "partials/specifications/spacing.md"
 </section>
 
 <section data-tab="Accessibility">

@@ -12,19 +12,6 @@
 
 ![The anatomy of the Form layout, indicating the header, sections, separator, and actions](/assets/components/form/layout/form-anatomy.png)
 
-## Spacing
-
-Spacing in forms is based on a decreasing scale on an 8px grid. From largest to smallest, the spacing structure is:
-
-- The Form Header, Sections, Separators, and Footer are 32px apart.
-- Stacked inputs are 24px apart.
-- Side by side inputs within a Section Multi Field Group are 16px apart.
-- Text elements within the Form Header and Form Section Headers are 8px apart.
-
-![Representation of the various spacing sizes between Form layout components](/assets/components/form/layout/form-layout-spacing.png)
-
-Visit the [Form Patterns](/patterns/form-patterns) guidelines for additional details on spacing in forms.
-
 ## Form
 
 The Form component serves as the container for all Form layout components and form content. It establishes the spacing between the Form Header, Sections, Separators, and Form Footer.

@@ -0,0 +1,12 @@
+## Spacing
+
+Spacing in forms is based on a decreasing scale on an 8px grid. From largest to smallest, the spacing structure is:
+
+- The Form Header, Sections, Separators, and Footer are 32px apart.
+- Stacked inputs are 24px apart.
+- Side by side inputs within a Section Multi Field Group are 16px apart.
+- Text elements within the Form Header and Form Section Headers are 8px apart.
+
+![Representation of the various spacing sizes between Form layout components](/assets/components/form/layout/form-layout-spacing.png)
+
+Visit the [Form Patterns](/patterns/form-patterns) guidelines for additional details on spacing in forms.
@@ -34,6 +34,7 @@ navigation:
 
 <section data-tab="Specifications">
   @include "partials/specifications/anatomy.md"
+  @include "partials/specifications/spacing.md"
 </section>
 
 <section data-tab="Accessibility">

@@ -44,19 +44,6 @@ The Rich Tooltip supports collision detection, meaning the `placement` property
 
 ![Example of collision detection in the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-collision-detection.png)
 
-## Offset
-
-The default recommended distance between the toggle and the Rich Tooltip pointer is 4px.
-
-![Default spacing for the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-spacing.png)
-
-!!! Dont
-
-Don’t add extra offset if the Rich Tooltip would block important information, appear disconnected from the element it is meant to provide information for, or cause confusion for the user.
-
-![Example of adjusting the offset of the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-dont.png)
-!!!
-
 ## Interaction
 
 The Rich Tooltip supports two interaction methods: a `On hover / On focus` ("soft") interaction and a `On click` interaction. Which one to use depends on:

@@ -0,0 +1,12 @@
+## Spacing
+
+The default recommended distance between the toggle and the Rich Tooltip pointer is 4px.
+
+![Default spacing for the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-spacing.png)
+
+!!! Dont
+
+Don’t add extra offset if the Rich Tooltip would block important information, appear disconnected from the element it is meant to provide information for, or cause confusion for the user.
+
+![Example of adjusting the offset of the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-dont.png)
+!!!
@@ -36,6 +36,7 @@ navigation:
 <section data-tab="Specifications">
   @include "partials/specifications/anatomy.md"
   @include "partials/specifications/states.md"
+  @include "partials/specifications/spacing.md"
 </section>
 
 <section data-tab="Accessibility">

@@ -36,31 +36,6 @@ The most common options are: `top`, `bottom`, `left`, `right`.
 
 The tooltip supports additional placement options: `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, `right-end`.
 
-## Offset
-
-!!! Info
-
- In some cases, adding an offset may be necessary to adjust the position of the tooltip. Changing the default offset should be done sparingly and only when it’s necessary to make sure that the tooltip does not obscure or cover the trigger or other important information.
-!!!
-
-The default and recommended distance between the trigger and the tooltip’s pointer is 4px.
-
-![Default offset of the tooltip](/assets/components/tooltip/tooltip-spacing.png)
-
-!!! Do
-
-Adjust the offset when the tooltip needs to be positioned in a way that it doesn’t obstruct the view of the UI element or information it is associated with.
-
-![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-do.png)
-!!!
-
-!!! Dont
-
-Don’t add extra offset if the tooltip would block important information, appear disjointed from the element it is meant to provide information for, or cause confusion for the user.
-
-![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-dont.png)
-!!!
-
 ## Content
 
 The tooltip should contain text only. Basic text formatting, such as bold and italic, is supported.

@@ -0,0 +1,24 @@
+## Spacing
+
+!!! Info
+
+ In some cases, adding an offset may be necessary to adjust the position of the tooltip. Changing the default offset should be done sparingly and only when it’s necessary to make sure that the tooltip does not obscure or cover the trigger or other important information.
+!!!
+
+The default and recommended distance between the trigger and the tooltip’s pointer is 4px.
+
+![Default offset of the tooltip](/assets/components/tooltip/tooltip-spacing.png)
+
+!!! Do
+
+Adjust the offset when the tooltip needs to be positioned in a way that it doesn’t obstruct the view of the UI element or information it is associated with.
+
+![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-do.png)
+!!!
+
+!!! Dont
+
+Don’t add extra offset if the tooltip would block important information, appear disjointed from the element it is meant to provide information for, or cause confusion for the user.
+
+![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-dont.png)
+!!!