@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
1,442 lines • 71 kB
Markdown
---
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. |