@primer/react-brand 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568

package/docs/components/Tiles/index.md

@@ -0,0 +1,1441 @@
+---
+title: Tiles
+description: Use tiles to display a grid of logos or icons with optional links.
+keywords: ['tiles', 'grid', 'logos', 'icons', 'links', 'integrations']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/Tiles/Tiles.tsx
+storybook: '/brand/storybook/?path=/story/components-tiles--playground'
+---
+
+```js
+import {Tiles} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<Tiles>
+  <Tiles.Item name="GitHub">
+    <svg role="img" width="44" height="44" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>GitHub</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        fill="currentColor"
+      />
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="VS Code">
+    <svg
+      focusable="false"
+      width="44"
+      height="44"
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Visual Studio Code icon"
+    >
+      <mask id="mask0_default" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_default)">
+        <path
+          d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"
+          fill="#0065A9"
+        />
+        <g filter="url(#filter0_d_default)">
+          <path
+            d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"
+            fill="#007ACC"
+          />
+        </g>
+        <g filter="url(#filter1_d_default)">
+          <path
+            d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"
+            fill="#1F9CF0"
+          />
+        </g>
+        <g style={{mixBlendMode: 'overlay', opacity: 0.25}}>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z"
+            fill="url(#paint0_linear_default)"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_default"
+          x="-8.39411"
+          y="15.8291"
+          width="116.727"
+          height="92.2456"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="filter1_d_default"
+          x="60.4167"
+          y="-8.07558"
+          width="47.9167"
+          height="116.151"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <linearGradient
+          id="paint0_linear_default"
+          x1="49.9392"
+          y1="0.257812"
+          x2="49.9392"
+          y2="99.7423"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Visual Studio">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      width="44"
+      height="44"
+      viewBox="0 0 193 193"
+      focusable="false"
+      aria-label="Visual Studio icon"
+    >
+      <title>Visual Studio</title>
+      <defs>
+        <path id="vs_reuse_default" fill="#fff" d="M8.271 8.271h176.457v176.457H8.271z" />
+      </defs>
+      <g clipPath="url(#vs_clip_a_default)">
+        <g clipPath="url(#vs_clip_b_default)">
+          <mask
+            id="vs_mask_default"
+            width="177"
+            height="177"
+            x="8"
+            y="8"
+            maskUnits="userSpaceOnUse"
+            style={{maskType: 'alpha'}}
+          >
+            <path
+              fill="#fff"
+              d="m40.621 157.524-29.408-22.057a7.284 7.284 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <path
+              fill="#fff"
+              d="M181.456 38.895a7.39 7.39 0 0 0-4.081-1.213 7.139 7.139 0 0 0-5.073 2.057l-.513.515L113.117 96.5l-32.462 31.137-30.034 28.784-.515.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.412-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.998-1.103l32.644-37.9 26.8-31.1 46.946-54.52a7.238 7.238 0 0 1 5.55-2.572 7.385 7.385 0 0 1 4.08 1.213l44.225 29.41Z"
+            />
+            <path
+              fill="#fff"
+              d="m181.456 154.105-44.114 29.41a7.447 7.447 0 0 1-9.667-1.323l-47.02-54.555-26.8-31.173-32.644-37.867a7.386 7.386 0 0 0-9.998-1.064l29.408-22.057a7.39 7.39 0 0 1 4.411-1.472 7.132 7.132 0 0 1 5.074 2.06l.515.515 30.034 28.785L113.117 96.5l58.672 56.246.513.515a7.136 7.136 0 0 0 5.073 2.057 7.387 7.387 0 0 0 4.081-1.213Z"
+            />
+            <path
+              fill="#fff"
+              d="M184.729 45.032v102.936a7.375 7.375 0 0 1-3.273 6.137l-44.114 29.41a7.38 7.38 0 0 0 3.272-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.419 7.419 0 0 1 3.273 6.137Z"
+            />
+          </mask>
+          <g mask="url(#vs_mask_default)">
+            <path
+              fill="#5E438F"
+              d="m40.621 157.524-29.408-22.057a7.292 7.292 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <g filter="url(#vs_filter_d_default)">
+              <path
+                fill="url(#vs_grad_e_default)"
+                d="M181.455 38.895a7.385 7.385 0 0 0-4.08-1.213 7.147 7.147 0 0 0-5.073 2.057l-.513.515-31.25 29.962L113.117 96.5l-32.463 31.137-30.033 28.784-.516.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.411-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.997-1.103l16.471-19.115 16.174-18.785 26.8-31.1 46.945-54.52a7.251 7.251 0 0 1 5.55-2.572 7.39 7.39 0 0 1 4.081 1.213l44.224 29.41Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_f_default)">
+              <path
+                fill="url(#vs_grad_g_default)"
+                d="m181.455 154.105-44.114 29.411a7.443 7.443 0 0 1-9.666-1.324l-47.02-54.555-26.8-31.173-16.173-18.748L21.21 58.598a7.387 7.387 0 0 0-9.997-1.065L40.62 35.477a7.389 7.389 0 0 1 4.411-1.472 7.128 7.128 0 0 1 5.073 2.06l.516.515 30.033 28.785L113.117 96.5l27.461 26.323 31.211 29.923.513.516a7.155 7.155 0 0 0 5.073 2.056 7.382 7.382 0 0 0 4.08-1.213Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_h_default)">
+              <path
+                fill="url(#vs_grad_i_default)"
+                d="M184.729 45.032v102.935a7.38 7.38 0 0 1-3.273 6.138l-44.115 29.41a7.383 7.383 0 0 0 3.273-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.428 7.428 0 0 1 3.273 6.137Z"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id="vs_grad_e_default"
+          x1="151.642"
+          x2="20.614"
+          y1="8.271"
+          y2="140.148"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7252AA" />
+          <stop offset="1" stopColor="#7252AA" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_g_default"
+          x1="24.814"
+          x2="147.966"
+          y1="40.437"
+          y2="178.293"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#AE7FE2" />
+          <stop offset="1" stopColor="#9A70D4" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_i_default"
+          x1="160.457"
+          x2="160.457"
+          y1="5.936"
+          y2="183.367"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D59DFF" />
+          <stop offset="1" stopColor="#C18EF1" />
+        </linearGradient>
+        <filter
+          id="vs_filter_d_default"
+          width="180.604"
+          height="161.087"
+          x="6.032"
+          y="4.386"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_f_default"
+          width="180.604"
+          height="161.085"
+          x="6.032"
+          y="30.118"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_h_default"
+          width="78.583"
+          height="205.117"
+          x="121.688"
+          y="-6.059"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation=".13" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="7.771" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <clipPath id="vs_clip_a_default">
+          <use xlinkHref="#vs_reuse_default" />
+        </clipPath>
+        <clipPath id="vs_clip_b_default">
+          <use xlinkHref="#vs_reuse_default" />
+        </clipPath>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Azure">
+    <svg role="img" width="44" height="44" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient
+          id="azure_default_a"
+          x1="-1032.17"
+          x2="-1059.21"
+          y1="145.31"
+          y2="65.43"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#114a8b" />
+          <stop offset="1" stopColor="#0669bc" />
+        </linearGradient>
+        <linearGradient
+          id="azure_default_b"
+          x1="-1023.73"
+          x2="-1029.98"
+          y1="108.08"
+          y2="105.97"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopOpacity=".3" />
+          <stop offset=".07" stopOpacity=".2" />
+          <stop offset=".32" stopOpacity=".1" />
+          <stop offset=".62" stopOpacity=".05" />
+          <stop offset="1" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="azure_default_c"
+          x1="-1027.16"
+          x2="-997.48"
+          y1="147.64"
+          y2="68.56"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#3ccbf4" />
+          <stop offset="1" stopColor="#2892df" />
+        </linearGradient>
+      </defs>
+      <title>Azure</title>
+      <path
+        fill="url(#azure_default_a)"
+        d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
+      />
+      <path
+        fill="#0078d4"
+        d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
+      />
+      <path
+        fill="url(#azure_default_b)"
+        d="M33.34 6.54a4.12 4.12 0 0 0-3.95 2.88L4.25 83.92a4.14 4.14 0 0 0 3.91 5.54h20.79a4.44 4.44 0 0 0 3.4-2.9l5.02-14.78 17.91 16.7a4.24 4.24 0 0 0 2.67.97h23.29L71.02 60.26H41.24L59.47 6.55z"
+      />
+      <path
+        fill="url(#azure_default_c)"
+        d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
+      />
+    </svg>
+  </Tiles.Item>
+</Tiles>
+```
+
+### Gridlines variant
+
+Use the `gridlines` variant to display visible grid lines between tiles.
+
+```jsx
+<Tiles variant="gridlines">
+  <Tiles.Item name="GitHub">
+    <svg role="img" width="44" height="44" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>GitHub</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        fill="currentColor"
+      />
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="VS Code">
+    <svg
+      focusable="false"
+      width="44"
+      height="44"
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Visual Studio Code icon"
+    >
+      <mask id="mask0_gridlines" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_gridlines)">
+        <path
+          d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"
+          fill="#0065A9"
+        />
+        <g filter="url(#filter0_d_gridlines)">
+          <path
+            d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"
+            fill="#007ACC"
+          />
+        </g>
+        <g filter="url(#filter1_d_gridlines)">
+          <path
+            d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"
+            fill="#1F9CF0"
+          />
+        </g>
+        <g style={{mixBlendMode: 'overlay', opacity: 0.25}}>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z"
+            fill="url(#paint0_linear_gridlines)"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_gridlines"
+          x="-8.39411"
+          y="15.8291"
+          width="116.727"
+          height="92.2456"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="filter1_d_gridlines"
+          x="60.4167"
+          y="-8.07558"
+          width="47.9167"
+          height="116.151"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <linearGradient
+          id="paint0_linear_gridlines"
+          x1="49.9392"
+          y1="0.257812"
+          x2="49.9392"
+          y2="99.7423"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Visual Studio">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      width="44"
+      height="44"
+      viewBox="0 0 193 193"
+      focusable="false"
+      aria-label="Visual Studio icon"
+    >
+      <title>Visual Studio</title>
+      <defs>
+        <path id="vs_reuse_gridlines" fill="#fff" d="M8.271 8.271h176.457v176.457H8.271z" />
+      </defs>
+      <g clipPath="url(#vs_clip_a_gridlines)">
+        <g clipPath="url(#vs_clip_b_gridlines)">
+          <mask
+            id="vs_mask_gridlines"
+            width="177"
+            height="177"
+            x="8"
+            y="8"
+            maskUnits="userSpaceOnUse"
+            style={{maskType: 'alpha'}}
+          >
+            <path
+              fill="#fff"
+              d="m40.621 157.524-29.408-22.057a7.284 7.284 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <path
+              fill="#fff"
+              d="M181.456 38.895a7.39 7.39 0 0 0-4.081-1.213 7.139 7.139 0 0 0-5.073 2.057l-.513.515L113.117 96.5l-32.462 31.137-30.034 28.784-.515.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.412-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.998-1.103l32.644-37.9 26.8-31.1 46.946-54.52a7.238 7.238 0 0 1 5.55-2.572 7.385 7.385 0 0 1 4.08 1.213l44.225 29.41Z"
+            />
+            <path
+              fill="#fff"
+              d="m181.456 154.105-44.114 29.41a7.447 7.447 0 0 1-9.667-1.323l-47.02-54.555-26.8-31.173-32.644-37.867a7.386 7.386 0 0 0-9.998-1.064l29.408-22.057a7.39 7.39 0 0 1 4.411-1.472 7.132 7.132 0 0 1 5.074 2.06l.515.515 30.034 28.785L113.117 96.5l58.672 56.246.513.515a7.136 7.136 0 0 0 5.073 2.057 7.387 7.387 0 0 0 4.081-1.213Z"
+            />
+            <path
+              fill="#fff"
+              d="M184.729 45.032v102.936a7.375 7.375 0 0 1-3.273 6.137l-44.114 29.41a7.38 7.38 0 0 0 3.272-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.419 7.419 0 0 1 3.273 6.137Z"
+            />
+          </mask>
+          <g mask="url(#vs_mask_gridlines)">
+            <path
+              fill="#5E438F"
+              d="m40.621 157.524-29.408-22.057a7.292 7.292 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <g filter="url(#vs_filter_d_gridlines)">
+              <path
+                fill="url(#vs_grad_e_gridlines)"
+                d="M181.455 38.895a7.385 7.385 0 0 0-4.08-1.213 7.147 7.147 0 0 0-5.073 2.057l-.513.515-31.25 29.962L113.117 96.5l-32.463 31.137-30.033 28.784-.516.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.411-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.997-1.103l16.471-19.115 16.174-18.785 26.8-31.1 46.945-54.52a7.251 7.251 0 0 1 5.55-2.572 7.39 7.39 0 0 1 4.081 1.213l44.224 29.41Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_f_gridlines)">
+              <path
+                fill="url(#vs_grad_g_gridlines)"
+                d="m181.455 154.105-44.114 29.411a7.443 7.443 0 0 1-9.666-1.324l-47.02-54.555-26.8-31.173-16.173-18.748L21.21 58.598a7.387 7.387 0 0 0-9.997-1.065L40.62 35.477a7.389 7.389 0 0 1 4.411-1.472 7.128 7.128 0 0 1 5.073 2.06l.516.515 30.033 28.785L113.117 96.5l27.461 26.323 31.211 29.923.513.516a7.155 7.155 0 0 0 5.073 2.056 7.382 7.382 0 0 0 4.08-1.213Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_h_gridlines)">
+              <path
+                fill="url(#vs_grad_i_gridlines)"
+                d="M184.729 45.032v102.935a7.38 7.38 0 0 1-3.273 6.138l-44.115 29.41a7.383 7.383 0 0 0 3.273-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.428 7.428 0 0 1 3.273 6.137Z"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id="vs_grad_e_gridlines"
+          x1="151.642"
+          x2="20.614"
+          y1="8.271"
+          y2="140.148"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7252AA" />
+          <stop offset="1" stopColor="#7252AA" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_g_gridlines"
+          x1="24.814"
+          x2="147.966"
+          y1="40.437"
+          y2="178.293"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#AE7FE2" />
+          <stop offset="1" stopColor="#9A70D4" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_i_gridlines"
+          x1="160.457"
+          x2="160.457"
+          y1="5.936"
+          y2="183.367"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D59DFF" />
+          <stop offset="1" stopColor="#C18EF1" />
+        </linearGradient>
+        <filter
+          id="vs_filter_d_gridlines"
+          width="180.604"
+          height="161.087"
+          x="6.032"
+          y="4.386"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_f_gridlines"
+          width="180.604"
+          height="161.085"
+          x="6.032"
+          y="30.118"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_h_gridlines"
+          width="78.583"
+          height="205.117"
+          x="121.688"
+          y="-6.059"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation=".13" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="7.771" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <clipPath id="vs_clip_a_gridlines">
+          <use xlinkHref="#vs_reuse_gridlines" />
+        </clipPath>
+        <clipPath id="vs_clip_b_gridlines">
+          <use xlinkHref="#vs_reuse_gridlines" />
+        </clipPath>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Azure">
+    <svg role="img" width="44" height="44" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient
+          id="azure_gridlines_a"
+          x1="-1032.17"
+          x2="-1059.21"
+          y1="145.31"
+          y2="65.43"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#114a8b" />
+          <stop offset="1" stopColor="#0669bc" />
+        </linearGradient>
+        <linearGradient
+          id="azure_gridlines_b"
+          x1="-1023.73"
+          x2="-1029.98"
+          y1="108.08"
+          y2="105.97"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopOpacity=".3" />
+          <stop offset=".07" stopOpacity=".2" />
+          <stop offset=".32" stopOpacity=".1" />
+          <stop offset=".62" stopOpacity=".05" />
+          <stop offset="1" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="azure_gridlines_c"
+          x1="-1027.16"
+          x2="-997.48"
+          y1="147.64"
+          y2="68.56"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#3ccbf4" />
+          <stop offset="1" stopColor="#2892df" />
+        </linearGradient>
+      </defs>
+      <title>Azure</title>
+      <path
+        fill="url(#azure_gridlines_a)"
+        d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
+      />
+      <path
+        fill="#0078d4"
+        d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
+      />
+      <path
+        fill="url(#azure_gridlines_b)"
+        d="M33.34 6.54a4.12 4.12 0 0 0-3.95 2.88L4.25 83.92a4.14 4.14 0 0 0 3.91 5.54h20.79a4.44 4.44 0 0 0 3.4-2.9l5.02-14.78 17.91 16.7a4.24 4.24 0 0 0 2.67.97h23.29L71.02 60.26H41.24L59.47 6.55z"
+      />
+      <path
+        fill="url(#azure_gridlines_c)"
+        d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
+      />
+    </svg>
+  </Tiles.Item>
+</Tiles>
+```
+
+### Compact layout
+
+Use the `compact` layout for a denser grid with smaller tiles and more items per row.
+
+```jsx
+<Tiles layout="compact" variant="gridlines">
+  <Tiles.Item name="GitHub">
+    <svg role="img" width="44" height="44" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>GitHub</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        fill="currentColor"
+      />
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="VS Code">
+    <svg
+      focusable="false"
+      width="44"
+      height="44"
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Visual Studio Code icon"
+    >
+      <mask id="mask0_compact" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_compact)">
+        <path
+          d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"
+          fill="#0065A9"
+        />
+        <g filter="url(#filter0_d_compact)">
+          <path
+            d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"
+            fill="#007ACC"
+          />
+        </g>
+        <g filter="url(#filter1_d_compact)">
+          <path
+            d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"
+            fill="#1F9CF0"
+          />
+        </g>
+        <g style={{mixBlendMode: 'overlay', opacity: 0.25}}>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z"
+            fill="url(#paint0_linear_compact)"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_compact"
+          x="-8.39411"
+          y="15.8291"
+          width="116.727"
+          height="92.2456"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="filter1_d_compact"
+          x="60.4167"
+          y="-8.07558"
+          width="47.9167"
+          height="116.151"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <linearGradient
+          id="paint0_linear_compact"
+          x1="49.9392"
+          y1="0.257812"
+          x2="49.9392"
+          y2="99.7423"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Visual Studio">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      width="44"
+      height="44"
+      viewBox="0 0 193 193"
+      focusable="false"
+      aria-label="Visual Studio icon"
+    >
+      <title>Visual Studio</title>
+      <defs>
+        <path id="vs_reuse_compact" fill="#fff" d="M8.271 8.271h176.457v176.457H8.271z" />
+      </defs>
+      <g clipPath="url(#vs_clip_a_compact)">
+        <g clipPath="url(#vs_clip_b_compact)">
+          <mask
+            id="vs_mask_compact"
+            width="177"
+            height="177"
+            x="8"
+            y="8"
+            maskUnits="userSpaceOnUse"
+            style={{maskType: 'alpha'}}
+          >
+            <path
+              fill="#fff"
+              d="m40.621 157.524-29.408-22.057a7.284 7.284 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <path
+              fill="#fff"
+              d="M181.456 38.895a7.39 7.39 0 0 0-4.081-1.213 7.139 7.139 0 0 0-5.073 2.057l-.513.515L113.117 96.5l-32.462 31.137-30.034 28.784-.515.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.412-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.998-1.103l32.644-37.9 26.8-31.1 46.946-54.52a7.238 7.238 0 0 1 5.55-2.572 7.385 7.385 0 0 1 4.08 1.213l44.225 29.41Z"
+            />
+            <path
+              fill="#fff"
+              d="m181.456 154.105-44.114 29.41a7.447 7.447 0 0 1-9.667-1.323l-47.02-54.555-26.8-31.173-32.644-37.867a7.386 7.386 0 0 0-9.998-1.064l29.408-22.057a7.39 7.39 0 0 1 4.411-1.472 7.132 7.132 0 0 1 5.074 2.06l.515.515 30.034 28.785L113.117 96.5l58.672 56.246.513.515a7.136 7.136 0 0 0 5.073 2.057 7.387 7.387 0 0 0 4.081-1.213Z"
+            />
+            <path
+              fill="#fff"
+              d="M184.729 45.032v102.936a7.375 7.375 0 0 1-3.273 6.137l-44.114 29.41a7.38 7.38 0 0 0 3.272-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.419 7.419 0 0 1 3.273 6.137Z"
+            />
+          </mask>
+          <g mask="url(#vs_mask_compact)">
+            <path
+              fill="#5E438F"
+              d="m40.621 157.524-29.408-22.057a7.292 7.292 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <g filter="url(#vs_filter_d_compact)">
+              <path
+                fill="url(#vs_grad_e_compact)"
+                d="M181.455 38.895a7.385 7.385 0 0 0-4.08-1.213 7.147 7.147 0 0 0-5.073 2.057l-.513.515-31.25 29.962L113.117 96.5l-32.463 31.137-30.033 28.784-.516.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.411-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.997-1.103l16.471-19.115 16.174-18.785 26.8-31.1 46.945-54.52a7.251 7.251 0 0 1 5.55-2.572 7.39 7.39 0 0 1 4.081 1.213l44.224 29.41Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_f_compact)">
+              <path
+                fill="url(#vs_grad_g_compact)"
+                d="m181.455 154.105-44.114 29.411a7.443 7.443 0 0 1-9.666-1.324l-47.02-54.555-26.8-31.173-16.173-18.748L21.21 58.598a7.387 7.387 0 0 0-9.997-1.065L40.62 35.477a7.389 7.389 0 0 1 4.411-1.472 7.128 7.128 0 0 1 5.073 2.06l.516.515 30.033 28.785L113.117 96.5l27.461 26.323 31.211 29.923.513.516a7.155 7.155 0 0 0 5.073 2.056 7.382 7.382 0 0 0 4.08-1.213Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_h_compact)">
+              <path
+                fill="url(#vs_grad_i_compact)"
+                d="M184.729 45.032v102.935a7.38 7.38 0 0 1-3.273 6.138l-44.115 29.41a7.383 7.383 0 0 0 3.273-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.428 7.428 0 0 1 3.273 6.137Z"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id="vs_grad_e_compact"
+          x1="151.642"
+          x2="20.614"
+          y1="8.271"
+          y2="140.148"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7252AA" />
+          <stop offset="1" stopColor="#7252AA" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_g_compact"
+          x1="24.814"
+          x2="147.966"
+          y1="40.437"
+          y2="178.293"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#AE7FE2" />
+          <stop offset="1" stopColor="#9A70D4" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_i_compact"
+          x1="160.457"
+          x2="160.457"
+          y1="5.936"
+          y2="183.367"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D59DFF" />
+          <stop offset="1" stopColor="#C18EF1" />
+        </linearGradient>
+        <filter
+          id="vs_filter_d_compact"
+          width="180.604"
+          height="161.087"
+          x="6.032"
+          y="4.386"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_f_compact"
+          width="180.604"
+          height="161.085"
+          x="6.032"
+          y="30.118"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_h_compact"
+          width="78.583"
+          height="205.117"
+          x="121.688"
+          y="-6.059"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation=".13" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="7.771" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <clipPath id="vs_clip_a_compact">
+          <use xlinkHref="#vs_reuse_compact" />
+        </clipPath>
+        <clipPath id="vs_clip_b_compact">
+          <use xlinkHref="#vs_reuse_compact" />
+        </clipPath>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Azure">
+    <svg role="img" width="44" height="44" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient
+          id="azure_compact_a"
+          x1="-1032.17"
+          x2="-1059.21"
+          y1="145.31"
+          y2="65.43"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#114a8b" />
+          <stop offset="1" stopColor="#0669bc" />
+        </linearGradient>
+        <linearGradient
+          id="azure_compact_b"
+          x1="-1023.73"
+          x2="-1029.98"
+          y1="108.08"
+          y2="105.97"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopOpacity=".3" />
+          <stop offset=".07" stopOpacity=".2" />
+          <stop offset=".32" stopOpacity=".1" />
+          <stop offset=".62" stopOpacity=".05" />
+          <stop offset="1" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="azure_compact_c"
+          x1="-1027.16"
+          x2="-997.48"
+          y1="147.64"
+          y2="68.56"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#3ccbf4" />
+          <stop offset="1" stopColor="#2892df" />
+        </linearGradient>
+      </defs>
+      <title>Azure</title>
+      <path
+        fill="url(#azure_compact_a)"
+        d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
+      />
+      <path
+        fill="#0078d4"
+        d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
+      />
+      <path
+        fill="url(#azure_compact_b)"
+        d="M33.34 6.54a4.12 4.12 0 0 0-3.95 2.88L4.25 83.92a4.14 4.14 0 0 0 3.91 5.54h20.79a4.44 4.44 0 0 0 3.4-2.9l5.02-14.78 17.91 16.7a4.24 4.24 0 0 0 2.67.97h23.29L71.02 60.26H41.24L59.47 6.55z"
+      />
+      <path
+        fill="url(#azure_compact_c)"
+        d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
+      />
+    </svg>
+  </Tiles.Item>
+</Tiles>
+```
+
+### With links
+
+Tiles items can optionally link to external pages by providing an `href` prop. An arrow icon appears on hover and focus.
+
+```jsx
+<Tiles variant="gridlines">
+  <Tiles.Item name="GitHub" href="https://github.com">
+    <svg role="img" width="44" height="44" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>GitHub</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        fill="currentColor"
+      />
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="VS Code" href="https://code.visualstudio.com">
+    <svg
+      focusable="false"
+      width="44"
+      height="44"
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Visual Studio Code icon"
+    >
+      <mask id="mask0_links" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_links)">
+        <path
+          d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"
+          fill="#0065A9"
+        />
+        <g filter="url(#filter0_d_links)">
+          <path
+            d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"
+            fill="#007ACC"
+          />
+        </g>
+        <g filter="url(#filter1_d_links)">
+          <path
+            d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"
+            fill="#1F9CF0"
+          />
+        </g>
+        <g style={{mixBlendMode: 'overlay', opacity: 0.25}}>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z"
+            fill="url(#paint0_linear_links)"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_links"
+          x="-8.39411"
+          y="15.8291"
+          width="116.727"
+          height="92.2456"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="filter1_d_links"
+          x="60.4167"
+          y="-8.07558"
+          width="47.9167"
+          height="116.151"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.16667" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <linearGradient
+          id="paint0_linear_links"
+          x1="49.9392"
+          y1="0.257812"
+          x2="49.9392"
+          y2="99.7423"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Visual Studio" href="https://visualstudio.microsoft.com">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      width="44"
+      height="44"
+      viewBox="0 0 193 193"
+      focusable="false"
+      aria-label="Visual Studio icon"
+    >
+      <title>Visual Studio</title>
+      <defs>
+        <path id="vs_reuse_links" fill="#fff" d="M8.271 8.271h176.457v176.457H8.271z" />
+      </defs>
+      <g clipPath="url(#vs_clip_a_links)">
+        <g clipPath="url(#vs_clip_b_links)">
+          <mask
+            id="vs_mask_links"
+            width="177"
+            height="177"
+            x="8"
+            y="8"
+            maskUnits="userSpaceOnUse"
+            style={{maskType: 'alpha'}}
+          >
+            <path
+              fill="#fff"
+              d="m40.621 157.524-29.408-22.057a7.284 7.284 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <path
+              fill="#fff"
+              d="M181.456 38.895a7.39 7.39 0 0 0-4.081-1.213 7.139 7.139 0 0 0-5.073 2.057l-.513.515L113.117 96.5l-32.462 31.137-30.034 28.784-.515.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.412-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.998-1.103l32.644-37.9 26.8-31.1 46.946-54.52a7.238 7.238 0 0 1 5.55-2.572 7.385 7.385 0 0 1 4.08 1.213l44.225 29.41Z"
+            />
+            <path
+              fill="#fff"
+              d="m181.456 154.105-44.114 29.41a7.447 7.447 0 0 1-9.667-1.323l-47.02-54.555-26.8-31.173-32.644-37.867a7.386 7.386 0 0 0-9.998-1.064l29.408-22.057a7.39 7.39 0 0 1 4.411-1.472 7.132 7.132 0 0 1 5.074 2.06l.515.515 30.034 28.785L113.117 96.5l58.672 56.246.513.515a7.136 7.136 0 0 0 5.073 2.057 7.387 7.387 0 0 0 4.081-1.213Z"
+            />
+            <path
+              fill="#fff"
+              d="M184.729 45.032v102.936a7.375 7.375 0 0 1-3.273 6.137l-44.114 29.41a7.38 7.38 0 0 0 3.272-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.419 7.419 0 0 1 3.273 6.137Z"
+            />
+          </mask>
+          <g mask="url(#vs_mask_links)">
+            <path
+              fill="#5E438F"
+              d="m40.621 157.524-29.408-22.057a7.292 7.292 0 0 1-2.941-5.881V63.414a7.287 7.287 0 0 1 2.941-5.88l29.408-22.058a6.658 6.658 0 0 0-2.02 5.881v110.286a6.66 6.66 0 0 0 2.02 5.881Z"
+            />
+            <g filter="url(#vs_filter_d_links)">
+              <path
+                fill="url(#vs_grad_e_links)"
+                d="M181.455 38.895a7.385 7.385 0 0 0-4.08-1.213 7.147 7.147 0 0 0-5.073 2.057l-.513.515-31.25 29.962L113.117 96.5l-32.463 31.137-30.033 28.784-.516.516a7.137 7.137 0 0 1-5.073 2.059 7.386 7.386 0 0 1-4.411-1.472l-29.408-22.057a7.346 7.346 0 0 0 9.997-1.103l16.471-19.115 16.174-18.785 26.8-31.1 46.945-54.52a7.251 7.251 0 0 1 5.55-2.572 7.39 7.39 0 0 1 4.081 1.213l44.224 29.41Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_f_links)">
+              <path
+                fill="url(#vs_grad_g_links)"
+                d="m181.455 154.105-44.114 29.411a7.443 7.443 0 0 1-9.666-1.324l-47.02-54.555-26.8-31.173-16.173-18.748L21.21 58.598a7.387 7.387 0 0 0-9.997-1.065L40.62 35.477a7.389 7.389 0 0 1 4.411-1.472 7.128 7.128 0 0 1 5.073 2.06l.516.515 30.033 28.785L113.117 96.5l27.461 26.323 31.211 29.923.513.516a7.155 7.155 0 0 0 5.073 2.056 7.382 7.382 0 0 0 4.08-1.213Z"
+              />
+            </g>
+            <g filter="url(#vs_filter_h_links)">
+              <path
+                fill="url(#vs_grad_i_links)"
+                d="M184.729 45.032v102.935a7.38 7.38 0 0 1-3.273 6.138l-44.115 29.41a7.383 7.383 0 0 0 3.273-6.14V15.625a7.44 7.44 0 0 0-3.383-6.14l44.225 29.41a7.428 7.428 0 0 1 3.273 6.137Z"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id="vs_grad_e_links"
+          x1="151.642"
+          x2="20.614"
+          y1="8.271"
+          y2="140.148"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7252AA" />
+          <stop offset="1" stopColor="#7252AA" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_g_links"
+          x1="24.814"
+          x2="147.966"
+          y1="40.437"
+          y2="178.293"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#AE7FE2" />
+          <stop offset="1" stopColor="#9A70D4" />
+        </linearGradient>
+        <linearGradient
+          id="vs_grad_i_links"
+          x1="160.457"
+          x2="160.457"
+          y1="5.936"
+          y2="183.367"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D59DFF" />
+          <stop offset="1" stopColor="#C18EF1" />
+        </linearGradient>
+        <filter
+          id="vs_filter_d_links"
+          width="180.604"
+          height="161.087"
+          x="6.032"
+          y="4.386"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_f_links"
+          width="180.604"
+          height="161.085"
+          x="6.032"
+          y="30.118"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy=".246" />
+          <feGaussianBlur stdDeviation=".246" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1.295" />
+          <feGaussianBlur stdDeviation="2.59" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <filter
+          id="vs_filter_h_links"
+          width="78.583"
+          height="205.117"
+          x="121.688"
+          y="-6.059"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation=".13" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="7.771" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
+          <feBlend in2="effect1_dropShadow" result="effect2_dropShadow" />
+          <feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+        </filter>
+        <clipPath id="vs_clip_a_links">
+          <use xlinkHref="#vs_reuse_links" />
+        </clipPath>
+        <clipPath id="vs_clip_b_links">
+          <use xlinkHref="#vs_reuse_links" />
+        </clipPath>
+      </defs>
+    </svg>
+  </Tiles.Item>
+  <Tiles.Item name="Azure" href="https://azure.microsoft.com">
+    <svg role="img" width="44" height="44" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient
+          id="azure_links_a"
+          x1="-1032.17"
+          x2="-1059.21"
+          y1="145.31"
+          y2="65.43"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#114a8b" />
+          <stop offset="1" stopColor="#0669bc" />
+        </linearGradient>
+        <linearGradient
+          id="azure_links_b"
+          x1="-1023.73"
+          x2="-1029.98"
+          y1="108.08"
+          y2="105.97"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopOpacity=".3" />
+          <stop offset=".07" stopOpacity=".2" />
+          <stop offset=".32" stopOpacity=".1" />
+          <stop offset=".62" stopOpacity=".05" />
+          <stop offset="1" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="azure_links_c"
+          x1="-1027.16"
+          x2="-997.48"
+          y1="147.64"
+          y2="68.56"
+          gradientTransform="matrix(1 0 0 -1 1075 158)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#3ccbf4" />
+          <stop offset="1" stopColor="#2892df" />
+        </linearGradient>
+      </defs>
+      <title>Azure</title>
+      <path
+        fill="url(#azure_links_a)"
+        d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
+      />
+      <path
+        fill="#0078d4"
+        d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
+      />
+      <path
+        fill="url(#azure_links_b)"
+        d="M33.34 6.54a4.12 4.12 0 0 0-3.95 2.88L4.25 83.92a4.14 4.14 0 0 0 3.91 5.54h20.79a4.44 4.44 0 0 0 3.4-2.9l5.02-14.78 17.91 16.7a4.24 4.24 0 0 0 2.67.97h23.29L71.02 60.26H41.24L59.47 6.55z"
+      />
+      <path
+        fill="url(#azure_links_c)"
+        d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
+      />
+    </svg>
+  </Tiles.Item>
+</Tiles>
+```
+
+## Component props
+
+### Tiles
+
+| Name      | Type                       | Default     | Description                           |
+| :-------- | :------------------------- | :---------- | :------------------------------------ |
+| `variant` | `'default' \| 'gridlines'` | `'default'` | The visual variant of the tiles grid. |
+| `layout`  | `'default' \| 'compact'`   | `'default'` | The layout density of the tiles grid. |
+
+### Tiles.Item
+
+| Name       | Type              | Default     | Description                                                        |
+| :--------- | :---------------- | :---------- | :----------------------------------------------------------------- |
+| `name`     | `string`          | `undefined` | The accessible name for the tile item.                             |
+| `href`     | `string`          | `undefined` | Optional URL to link the tile to. Adds an arrow icon on hover.     |
+| `children` | `React.ReactNode` | `undefined` | The icon or logo to display in the tile. Typically an SVG element. |