@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-row-docs.md

@@ -0,0 +1,2172 @@
+Row
+===
+
+Overview
+--------
+
+Used in conjunction with the `IressCol` component to lay out page content.
+
+* * *
+
+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-row--default)
+
+Child 1  
+Slightly taller
+
+Child 2
+
+Child 3
+
+```
+
+<IressRow
+  gutter\="spacing.700"
+  horizontalAlign\="left"
+  verticalAlign\="top"
+\>
+  <IressCol\>
+    <IressPlaceholder\>
+      <IressText
+        noGutter
+        p\="md"
+        textAlign\="center"
+      \>
+        Child 1        <br />
+        <small\>
+          Slightly taller        </small\>
+      </IressText\>
+    </IressPlaceholder\>
+  </IressCol\>
+  <IressCol\>
+    <IressPlaceholder\>
+      <IressText
+        noGutter
+        p\="md"
+        textAlign\="center"
+      \>
+        Child 2      </IressText\>
+    </IressPlaceholder\>
+  </IressCol\>
+  <IressCol\>
+    <IressPlaceholder\>
+      <IressText
+        noGutter
+        p\="md"
+        textAlign\="center"
+      \>
+        Child 3      </IressText\>
+    </IressPlaceholder\>
+  </IressCol\>
+</IressRow\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactNode
+
+
+
+ | \- | Choose option...nonetwoBasicPlaceholdersthreeDifferentSizedPlaceholders |
+| gutter | 
+
+Sets the gap between the children `<IressCol />` components.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"spacing.700"
+
+ |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+HorizontalAligns
+
+
+
+ | \- | 
+
+"left"
+
+ |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+VerticalAligns
+
+
+
+ | \- | 
+
+"top"
+
+ |
+
+Usage
+-----
+
+`IressRow` supports visual hierarchy by allowing you to add multiple columns in your layout, allowing the user to see more content on the screen at the same time.
+
+It works best alongside the `IressContainer` and `IressCol` components.
+
+### Gutter
+
+The spacing between columns is controlled by the `gutter` prop. To change the spacing between multiple columns once the row wraps, you can use the `rowGrap` prop.
+
+Note: The `gutter` prop only works with `IressCol` components. If you are using other components, please use the `IressInline` component instead.
+
+[](./iframe.html?id=components-row--gutter)
+
+Gutter: spacing.000
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.050
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.100
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.150
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.200
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.250
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.300
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.350
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.400
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.500
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.600
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.700
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.800
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.900
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.1000
+--------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: spacing.1200
+--------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: none
+------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: xs
+----------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: sm
+----------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: md
+----------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: lg
+----------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: xl
+----------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: field.footer
+--------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+* * *
+
+Gutter: slider.tick
+-------------------
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+```
+
+<IressStack
+  gap\="xl"
+  maxWidth\="container.xl"
+\>
+  <IressText\>
+    <h2\>
+      Gutter: spacing.000    </h2\>
+    <IressRow gutter\="spacing.000"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.050    </h2\>
+    <IressRow gutter\="spacing.050"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.100    </h2\>
+    <IressRow gutter\="spacing.100"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.150    </h2\>
+    <IressRow gutter\="spacing.150"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.200    </h2\>
+    <IressRow gutter\="spacing.200"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.250    </h2\>
+    <IressRow gutter\="spacing.250"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.300    </h2\>
+    <IressRow gutter\="spacing.300"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.350    </h2\>
+    <IressRow gutter\="spacing.350"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.400    </h2\>
+    <IressRow gutter\="spacing.400"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.500    </h2\>
+    <IressRow gutter\="spacing.500"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.600    </h2\>
+    <IressRow gutter\="spacing.600"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.700    </h2\>
+    <IressRow gutter\="spacing.700"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.800    </h2\>
+    <IressRow gutter\="spacing.800"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.900    </h2\>
+    <IressRow gutter\="spacing.900"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.1000    </h2\>
+    <IressRow gutter\="spacing.1000"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: spacing.1200    </h2\>
+    <IressRow gutter\="spacing.1200"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: none    </h2\>
+    <IressRow gutter\="none"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: xs    </h2\>
+    <IressRow gutter\="xs"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: sm    </h2\>
+    <IressRow gutter\="sm"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: md    </h2\>
+    <IressRow gutter\="md"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: lg    </h2\>
+    <IressRow gutter\="lg"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: xl    </h2\>
+    <IressRow gutter\="xl"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: field.footer    </h2\>
+    <IressRow gutter\="field.footer"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+  <IressText\>
+    <IressDivider mb\="xl" />
+    <h2\>
+      Gutter: slider.tick    </h2\>
+    <IressRow gutter\="slider.tick"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressText\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| gutter | 
+
+Sets the gap between the children `<IressCol />` components.
+
+ResponsiveProp
+
+
+
+ | \- | \- |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| useColGap | 
+
+\-
+
+ | \- | \- |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+VerticalAligns
+
+
+
+ | \- | Set object |
+
+### Responsive Gutter
+
+The `gutter` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+[](./iframe.html?id=components-row--responsive-gutter)
+
+Current breakpoint: **xl** breakpoint (1200px - 1499px)
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+```
+
+<IressContainer\>
+  <IressStack gap\="md"\>
+    <IressPanel bg\="alt"\>
+      Current breakpoint:{' '}
+      <kn />
+    </IressPanel\>
+    <IressRow
+      gutter\={{
+        lg: 'spacing.700',
+        md: 'spacing.400',
+        sm: 'spacing.200',
+        xl: 'spacing.1200',
+        xs: 'spacing.100',
+        xxl: 'spacing.100'
+      }}
+    \>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              className\="iress-p--md"
+              noGutter
+              textAlign\="center"
+            \>
+              1 of 4              <br />
+              <small\>
+                Slightly taller              </small\>
+            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              2 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              3 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText noGutter\>
+              4 of 4            </IressText\>
+          </IressPlaceholder\>
+        </IressCol\>
+      </React.Fragment\>
+    </IressRow\>
+  </IressStack\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| gutter | 
+
+Sets the gap between the children `<IressCol />` components.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+RAW
+
+gutter :
+
+{
+
+*   xs : "spacing.100"
+*   sm : "spacing.200"
+*   md : "spacing.400"
+*   lg : "spacing.700"
+*   xl : "spacing.1200"
+*   xxl : "spacing.100"
+
+}
+
+
+
+
+
+
+
+ |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| useColGap | 
+
+\-
+
+ | \- | \- |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+VerticalAligns
+
+
+
+ | \- | Set object |
+
+### Alignment
+
+### Horizontal alignment
+
+`IressRow` can be set to align horizontally using the `horizontalAlign` prop.
+
+[](./iframe.html?id=components-row--horizontal-alignment)
+
+Horizontal align: around
+------------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+* * *
+
+Horizontal align: between
+-------------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+* * *
+
+Horizontal align: center
+------------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+* * *
+
+Horizontal align: evenly
+------------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+* * *
+
+Horizontal align: left
+----------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+* * *
+
+Horizontal align: right
+-----------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+```
+
+<IressContainer\>
+  <IressStack gap\="md"\>
+    <IressText\>
+      <h2\>
+        Horizontal align: around      </h2\>
+      <IressRow horizontalAlign\="around"\>
+        <React.Fragment key\=".0"\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </IressText\>
+    <IressText\>
+      <IressDivider mb\="md" />
+      <h2\>
+        Horizontal align: between      </h2\>
+      <IressRow horizontalAlign\="between"\>
+        <React.Fragment key\=".0"\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </IressText\>
+    <IressText\>
+      <IressDivider mb\="md" />
+      <h2\>
+        Horizontal align: center      </h2\>
+      <IressRow horizontalAlign\="center"\>
+        <React.Fragment key\=".0"\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </IressText\>
+    <IressText\>
+      <IressDivider mb\="md" />
+      <h2\>
+        Horizontal align: evenly      </h2\>
+      <IressRow horizontalAlign\="evenly"\>
+        <React.Fragment key\=".0"\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </IressText\>
+    <IressText\>
+      <IressDivider mb\="md" />
+      <h2\>
+        Horizontal align: left      </h2\>
+      <IressRow horizontalAlign\="left"\>
+        <React.Fragment key\=".0"\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </IressText\>
+    <IressText\>
+      <IressDivider mb\="md" />
+      <h2\>
+        Horizontal align: right      </h2\>
+      <IressRow horizontalAlign\="right"\>
+        <React.Fragment key\=".0"\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol span\={2}\>
+            <IressPlaceholder\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </IressText\>
+  </IressStack\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| gutter | 
+
+Sets the gap between the children `<IressCol />` components.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+HorizontalAligns
+
+
+
+ | \- | \- |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+VerticalAligns
+
+
+
+ | \- | Set object |
+
+### Vertical alignment
+
+`IressRow` can be set to align vertically using the `verticalAlign` prop.
+
+[](./iframe.html?id=components-row--vertical-alignment)
+
+Vertical align: top
+-------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+Vertical align: middle
+----------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+Vertical align: bottom
+----------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+Vertical align: stretch
+-----------------------
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+```
+
+<IressContainer\>
+  <IressStack gap\="md"\>
+    <div\>
+      <IressText element\="h2"\>
+        Vertical align: top      </IressText\>
+      <IressRow
+        layerStyle\="elevation.raised"
+        style\={{
+          height: '10rem'
+        }}
+        verticalAlign\="top"
+      \>
+        <React.Fragment key\=".0"\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </div\>
+    <div\>
+      <IressText element\="h2"\>
+        Vertical align: middle      </IressText\>
+      <IressRow
+        layerStyle\="elevation.raised"
+        style\={{
+          height: '10rem'
+        }}
+        verticalAlign\="middle"
+      \>
+        <React.Fragment key\=".0"\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </div\>
+    <div\>
+      <IressText element\="h2"\>
+        Vertical align: bottom      </IressText\>
+      <IressRow
+        layerStyle\="elevation.raised"
+        style\={{
+          height: '10rem'
+        }}
+        verticalAlign\="bottom"
+      \>
+        <React.Fragment key\=".0"\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </div\>
+    <div\>
+      <IressText element\="h2"\>
+        Vertical align: stretch      </IressText\>
+      <IressRow
+        layerStyle\="elevation.raised"
+        style\={{
+          height: '10rem'
+        }}
+        verticalAlign\="stretch"
+      \>
+        <React.Fragment key\=".0"\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                1 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                2 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+          <IressCol\>
+            <IressPlaceholder height\="100%"\>
+              <IressText noGutter\>
+                3 of 3              </IressText\>
+            </IressPlaceholder\>
+          </IressCol\>
+        </React.Fragment\>
+      </IressRow\>
+    </div\>
+  </IressStack\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained. Best used with `IressCol`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| gutter | 
+
+Sets the gap between the children `<IressCol />` components.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| horizontalAlign | 
+
+Horizontal alignment, follows flexbox justify-content
+
+HorizontalAligns
+
+
+
+ | \- | Set object |
+| rowGap | 
+
+Sets the size of the top and bottom gap between direct children when they begin to wrap.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| verticalAlign | 
+
+Vertical alignment, follows flexbox align-items
+
+VerticalAligns
+
+
+
+ | \- | \- |