@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-inline-docs.md

@@ -0,0 +1,1962 @@
+Inline
+======
+
+Overview
+--------
+
+`IressInline` renders a set of components in a row with equal spacing around them, wrapping onto multiple lines when necessary.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-inline--default)
+
+```
+
+<IressInline gap\="spacing.400"\>
+  <IressPlaceholder
+    style\={{
+      minHeight: '30px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '50px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '80px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '60px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '10px'
+    }}
+    width\="50"
+  />
+</IressInline\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inline.
+
+ReactNode
+
+
+
+ | \- | Choose option...evenunevenstory |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.400"
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the inline content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+Wraps content when stretches beyond container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Sets the vertical alignment of the inline content.
+
+VerticalAligns
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Gap
+
+Inline spacing is applied to the direct children of the `IressInline` component.
+
+The amount of spacing is controlled by the `gap` prop and can be set from `spacing.000` to `spacing.1200`.
+
+#### What happened to `gutter`?
+
+The previous `gutter` prop has been replaced by `gap`, which uses the latest set of spacing tokens.
+
+The existing `gutter` values are still supported, as they are now aliases for the spacing tokens.
+
+[](./iframe.html?id=components-inline--gap)
+
+spacing.000
+-----------
+
+spacing.050
+-----------
+
+spacing.100
+-----------
+
+spacing.150
+-----------
+
+spacing.200
+-----------
+
+spacing.250
+-----------
+
+spacing.300
+-----------
+
+spacing.350
+-----------
+
+spacing.400
+-----------
+
+spacing.500
+-----------
+
+spacing.600
+-----------
+
+spacing.700
+-----------
+
+spacing.800
+-----------
+
+spacing.900
+-----------
+
+spacing.1000
+------------
+
+spacing.1200
+------------
+
+none
+----
+
+xs
+--
+
+sm
+--
+
+md
+--
+
+lg
+--
+
+xl
+--
+
+field.footer
+------------
+
+slider.tick
+-----------
+
+```
+
+<IressStack gap\="spacing.1200"\>
+  <IressText\>
+    <h2\>
+      spacing.000    </h2\>
+    <IressInline gap\="spacing.000"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.050    </h2\>
+    <IressInline gap\="spacing.050"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.100    </h2\>
+    <IressInline gap\="spacing.100"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.150    </h2\>
+    <IressInline gap\="spacing.150"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.200    </h2\>
+    <IressInline gap\="spacing.200"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.250    </h2\>
+    <IressInline gap\="spacing.250"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.300    </h2\>
+    <IressInline gap\="spacing.300"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.350    </h2\>
+    <IressInline gap\="spacing.350"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.400    </h2\>
+    <IressInline gap\="spacing.400"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.500    </h2\>
+    <IressInline gap\="spacing.500"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.600    </h2\>
+    <IressInline gap\="spacing.600"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.700    </h2\>
+    <IressInline gap\="spacing.700"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.800    </h2\>
+    <IressInline gap\="spacing.800"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.900    </h2\>
+    <IressInline gap\="spacing.900"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.1000    </h2\>
+    <IressInline gap\="spacing.1000"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      spacing.1200    </h2\>
+    <IressInline gap\="spacing.1200"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      none    </h2\>
+    <IressInline gap\="none"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      xs    </h2\>
+    <IressInline gap\="xs"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      sm    </h2\>
+    <IressInline gap\="sm"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      md    </h2\>
+    <IressInline gap\="md"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      lg    </h2\>
+    <IressInline gap\="lg"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      xl    </h2\>
+    <IressInline gap\="xl"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      field.footer    </h2\>
+    <IressInline gap\="field.footer"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      slider.tick    </h2\>
+    <IressInline gap\="slider.tick"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inline.
+
+ReactNode
+
+
+
+ | \- | Choose option...evenunevenstory |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | \- |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the inline content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+Wraps content when stretches beyond container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Sets the vertical alignment of the inline content.
+
+VerticalAligns
+
+
+
+ | \- | Set object |
+
+### Responsive gap
+
+The `gap` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+[](./iframe.html?id=components-inline--responsive-gap)
+
+Current breakpoint: **xl** breakpoint (1200px - 1499px).
+
+`gap={{"xs":"spacing.100","sm":"spacing.200","md":"spacing.400"}}`
+
+```
+
+<IressStack gap\="spacing.400"\>
+  <IressPanel\>
+    <p\>
+      Current breakpoint:{' '}
+      <kn />
+      .    </p\>
+    <p\>
+      <code\>
+        {\`gap={{"xs":"spacing.100","sm":"spacing.200","md":"spacing.400"}}\`}
+      </code\>
+    </p\>
+  </IressPanel\>
+  <IressInline
+    gap\={{
+      md: 'spacing.400',
+      sm: 'spacing.200',
+      xs: 'spacing.100'
+    }}
+  \>
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+  </IressInline\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inline.
+
+ReactNode
+
+
+
+ | \- | Choose option...evenunevenstory |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+RAW
+
+gap :
+
+{
+
+*   xs : "spacing.100"
+*   sm : "spacing.200"
+*   md : "spacing.400"
+
+}
+
+
+
+
+
+
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the inline content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+Wraps content when stretches beyond container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Sets the vertical alignment of the inline content.
+
+VerticalAligns
+
+
+
+ | \- | Set object |
+
+### Horizontal align
+
+Horizontal alignment of the children is controlled by the `horizontalAlign` prop. It defaults to left and can be set to the following:
+
+*   `around` - space is distributed so each direct child has the same space on the left and on the right. This means that the gap between children is twice as large as the gap between the first / last items and the edges of the container, because the gap between children is comprised one child's spacing right plus the next child's spacing left.
+*   `between` - space is distributed evenly between direct children, but the first and last children sit tight to the edges of the container.
+*   `center` - children are aligned center, similar to `text-align: center`.
+*   `evenly` - space is distributed evenly between direct children.
+*   `left` - children are aligned left, similar to `text-align: left`.
+*   `right` - children are aligned right, similar to `text-align: right`.
+
+[](./iframe.html?id=components-inline--horizontal-align)
+
+around
+------
+
+between
+-------
+
+center
+------
+
+evenly
+------
+
+left
+----
+
+right
+-----
+
+```
+
+<IressContainer\>
+  <IressStack gap\="spacing.1200"\>
+    <IressText\>
+      <h2\>
+        around      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="around"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        between      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="between"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        center      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="center"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        evenly      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="evenly"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        left      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="left"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        right      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="right"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+  </IressStack\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inline.
+
+ReactNode
+
+
+
+ | \- | Choose option...evenunevenstory |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.200"
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the inline content.
+
+HorizontalAligns
+
+
+
+ | \- | \- |
+| noWrap | 
+
+Wraps content when stretches beyond container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Sets the vertical alignment of the inline content.
+
+VerticalAligns
+
+
+
+ | \- | Set object |
+
+### Vertical align
+
+Vertical alignment of the children is controlled by the `verticalAlign` prop. It defaults to top and can be set to the following:
+
+*   `bottom` - children are aligned to the bottom of the container.
+*   `middle` - children are aligned to the middle of the container.
+*   `stretch` - each direct child stretches to the full height of the inline container.
+*   `top` - children are aligned to the top of the container.
+
+[](./iframe.html?id=components-inline--vertical-align)
+
+top
+---
+
+middle
+------
+
+bottom
+------
+
+stretch
+-------
+
+```
+
+<IressContainer\>
+  <IressStack gap\="spacing.1200"\>
+    <IressText textAlign\="center"\>
+      <h2\>
+        top      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="center"
+        verticalAlign\="top"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText textAlign\="center"\>
+      <h2\>
+        middle      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="center"
+        verticalAlign\="middle"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText textAlign\="center"\>
+      <h2\>
+        bottom      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="center"
+        verticalAlign\="bottom"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText textAlign\="center"\>
+      <h2\>
+        stretch      </h2\>
+      <IressInline
+        gap\="spacing.200"
+        horizontalAlign\="center"
+        verticalAlign\="stretch"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+  </IressStack\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inline.
+
+ReactNode
+
+
+
+ | \- | Choose option...evenunevenstory |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.200"
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the inline content.
+
+HorizontalAligns
+
+
+
+ | \- | 
+
+"center"
+
+ |
+| noWrap | 
+
+Wraps content when stretches beyond container.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Sets the vertical alignment of the inline content.
+
+VerticalAligns
+
+
+
+ | \- | \- |
+
+### No wrap
+
+The `IressInline` component automatically wraps children. There may be some scenarios where you do not require children to be wrapped. For this you can use the `noWrap` prop.
+
+[](./iframe.html?id=components-inline--no-wrap)
+
+His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
+
+```
+
+<IressInline
+  gap\="spacing.1200"
+  noWrap
+\>
+  <IressPlaceholder
+    height\="100px"
+    style\={{
+      minWidth: '100px'
+    }}
+    width\="100px"
+  />
+  <IressText\>
+    His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.  </IressText\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inline.
+
+ReactNode
+
+
+
+ | \- | Choose option...evenunevenstory |
+| gap | 
+
+Sets the gap between direct children.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.1200"
+
+ |
+| horizontalAlign | 
+
+Sets the horizontal alignment of the inline content.
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+| noWrap | 
+
+Wraps content when stretches beyond container.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Sets the vertical alignment of the inline content.
+
+VerticalAligns
+
+
+
+ | \- | Set object |