@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

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

@@ -1,877 +0,0 @@
-[](#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-v5150"
-      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-v5150"
-      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-v5150"
-      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-v5150"
-      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)