@iress-oss/ids-mcp-server 0.0.1-dev.0

package/generated/docs/components-row-docs.md

@@ -0,0 +1,877 @@
+[](#row)Row
+===========
+
+Overview
+--------
+
+Used in conjunction with the `IressCol` component to lay out page content.
+
+Child 1  
+Slightly taller
+
+Child 2
+
+Child 3
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressRow
+  gutter\="lg"
+  horizontalAlign\="left"
+  useColGap
+  verticalAlign\="top"
+\>
+  <IressPlaceholder\>
+    <IressText
+      align\="center"
+      className\="iress-p--md"
+      noGutter
+    \>
+      Child 1      <br />
+      <small\>
+        Slightly taller      </small\>
+    </IressText\>
+  </IressPlaceholder\>
+  <IressPlaceholder\>
+    <IressText
+      align\="center"
+      className\="iress-p--md"
+      noGutter
+    \>
+      Child 2    </IressText\>
+  </IressPlaceholder\>
+  <IressPlaceholder\>
+    <IressText
+      align\="center"
+      className\="iress-p--md"
+      noGutter
+    \>
+      Child 3    </IressText\>
+  </IressPlaceholder\>
+</IressRow\>
+
+Copy
+
+[](#usage)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. In version 5, the `useColGap` prop was introduced, allowing you to opt-in to using the column gap property in cases where you are not using the `IressCol` component.
+
+### [](#gutter)Gutter
+
+The spacing between columns is controlled by the `gutter` prop.
+
+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
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressContainer className\="iress-u-stack iress--gutter--md"\>
+  <IressRow\>
+    <React.Fragment key\=".0"\>
+      <IressCol span\={6}\>
+        <IressPlaceholder\>
+          <IressText
+            align\="center"
+            className\="iress-p--md"
+            noGutter
+          \>
+            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\>
+  <React.Fragment key\=".1"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Gutter: xs    </IressText\>
+    <IressRow gutter\="xs"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              align\="center"
+              className\="iress-p--md"
+              noGutter
+            \>
+              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\>
+  </React.Fragment\>
+  <React.Fragment key\=".2"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Gutter: sm    </IressText\>
+    <IressRow gutter\="sm"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              align\="center"
+              className\="iress-p--md"
+              noGutter
+            \>
+              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\>
+  </React.Fragment\>
+  <React.Fragment key\=".3"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Gutter: md    </IressText\>
+    <IressRow gutter\="md"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              align\="center"
+              className\="iress-p--md"
+              noGutter
+            \>
+              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\>
+  </React.Fragment\>
+  <React.Fragment key\=".4"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Gutter: lg    </IressText\>
+    <IressRow gutter\="lg"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              align\="center"
+              className\="iress-p--md"
+              noGutter
+            \>
+              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\>
+  </React.Fragment\>
+  <React.Fragment key\=".5"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Gutter: xl    </IressText\>
+    <IressRow gutter\="xl"\>
+      <React.Fragment key\=".0"\>
+        <IressCol span\={6}\>
+          <IressPlaceholder\>
+            <IressText
+              align\="center"
+              className\="iress-p--md"
+              noGutter
+            \>
+              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\>
+  </React.Fragment\>
+</IressContainer\>
+
+Copy
+
+### [](#responsive-gutter)Responsive gutter
+
+The `gutter` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+Current breakpoint: **xl** breakpoint (1200px - 1499px)
+
+1 of 4  
+Slightly taller
+
+2 of 4
+
+3 of 4
+
+4 of 4
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressContainer className\="iress-u-stack iress--gutter--md"\>
+  <IressPanel background\="alt"\>
+    Current breakpoint:{' '}
+    <CurrentBreakpoint />
+  </IressPanel\>
+  <IressRow
+    gutter\={{
+      lg: 'lg',
+      md: 'md',
+      sm: 'sm',
+      xl: 'xl',
+      xs: 'xs',
+      xxl: 'xs'
+    }}
+  \>
+    <React.Fragment key\=".0"\>
+      <IressCol span\={6}\>
+        <IressPlaceholder\>
+          <IressText
+            align\="center"
+            className\="iress-p--md"
+            noGutter
+          \>
+            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\>
+</IressContainer\>
+
+Copy
+
+### [](#alignment)Alignment
+
+### [](#horizontal-alignment)Horizontal alignment
+
+`IressRow` can be set to align horizontally using the `horizontalAlign` prop.
+
+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
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressContainer className\="iress-u-stack iress--gutter--md"\>
+  <React.Fragment key\=".0"\>
+    <IressText element\="h2"\>
+      Horizontal align: around    </IressText\>
+    <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\>
+  </React.Fragment\>
+  <React.Fragment key\=".1"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Horizontal align: between    </IressText\>
+    <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\>
+  </React.Fragment\>
+  <React.Fragment key\=".2"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Horizontal align: center    </IressText\>
+    <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\>
+  </React.Fragment\>
+  <React.Fragment key\=".3"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Horizontal align: evenly    </IressText\>
+    <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\>
+  </React.Fragment\>
+  <React.Fragment key\=".4"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Horizontal align: left    </IressText\>
+    <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\>
+  </React.Fragment\>
+  <React.Fragment key\=".5"\>
+    <IressDivider />
+    <IressText element\="h2"\>
+      Horizontal align: right    </IressText\>
+    <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\>
+  </React.Fragment\>
+</IressContainer\>
+
+Copy
+
+### [](#vertical-alignment)Vertical alignment
+
+`IressRow` can be set to align vertically using the `verticalAlign` prop.
+
+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
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+<IressContainer className\="iress-u-stack iress--gutter--lg"\>
+  <div\>
+    <IressText element\="h2"\>
+      Vertical align: top    </IressText\>
+    <IressRow
+      className\="ids-styles--set-height-v5142"
+      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
+      className\="ids-styles--set-height-v5142"
+      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
+      className\="ids-styles--set-height-v5142"
+      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
+      className\="ids-styles--set-height-v5142"
+      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\>
+</IressContainer\>
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Usage](#usage)
+    *   [Gutter](#gutter)
+    *   [Responsive gutter](#responsive-gutter)
+    *   [Alignment](#alignment)
+    *   [Horizontal alignment](#horizontal-alignment)
+    *   [Vertical alignment](#vertical-alignment)