@primer/react-brand/docs/components/LogoSuite/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Logo suite
description: Use a logo suite to present a list logos, such as sponsors or vendors.
keywords: ['logos', 'sponsors', 'vendors', 'clients', 'enterprise', 'social proof']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/LogoSuite/LogoSuite.tsx
storybook: '/brand/storybook/?path=/story/components-logosuite--playground'
---

```js
import {LogoSuite} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<LogoSuite>
  <LogoSuite.Heading visuallyHidden>Featured sponsors</LogoSuite.Heading>
  <LogoSuite.Logobar>
    <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 16" width="45" height="16">
      <title>GitHub</title>
      <path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"></path>
    </svg>
    <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.6 72">
      <title>Microsoft</title>
      <path
        fill="#737373"
        d="M140.4 14.4v43.2h-7.5V23.7h-.1l-13.4 33.9h-5l-13.7-33.9h-.1v33.9h-6.9V14.4h10.8l12.4 32h.2l13.1-32h10.2zm6.2 3.3c0-1.2.4-2.2 1.3-3 .9-.8 1.9-1.2 3.1-1.2 1.3 0 2.4.4 3.2 1.2s1.3 1.8 1.3 3-.4 2.2-1.3 3c-.9.8-1.9 1.2-3.2 1.2s-2.3-.4-3.1-1.2c-.8-.9-1.3-1.9-1.3-3zm8.1 8.9v31h-7.3v-31h7.3zm22.1 25.7c1.1 0 2.3-.2 3.6-.8 1.3-.5 2.5-1.2 3.6-2v6.8c-1.2.7-2.5 1.2-4 1.5-1.5.3-3.1.5-4.9.5-4.6 0-8.3-1.4-11.1-4.3-2.9-2.9-4.3-6.6-4.3-11 0-5 1.5-9.1 4.4-12.3 2.9-3.2 7-4.8 12.4-4.8 1.4 0 2.8.2 4.1.5 1.4.3 2.5.8 3.3 1.2v7c-1.1-.8-2.3-1.5-3.4-1.9-1.2-.4-2.4-.7-3.6-.7-2.9 0-5.2.9-7 2.8s-2.6 4.4-2.6 7.6c0 3.1.9 5.6 2.6 7.3 1.7 1.7 4 2.6 6.9 2.6zm27.9-26.2c.6 0 1.1 0 1.6.1s.9.2 1.2.3v7.4c-.4-.3-.9-.6-1.7-.8s-1.6-.4-2.7-.4c-1.8 0-3.3.8-4.5 2.3s-1.9 3.8-1.9 7v15.6h-7.3v-31h7.3v4.9h.1c.7-1.7 1.7-3 3-4 1.4-.9 3-1.4 4.9-1.4zm3.2 16.5c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.8-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.7 1.9-2.4 4.4-2.4 7.7zm35-7.5c0 1 .3 1.9 1 2.5.7.6 2.1 1.3 4.4 2.2 2.9 1.2 5 2.5 6.1 3.9 1.2 1.5 1.8 3.2 1.8 5.3 0 2.9-1.1 5.2-3.4 7-2.2 1.8-5.3 2.6-9.1 2.6-1.3 0-2.7-.2-4.3-.5-1.6-.3-2.9-.7-4-1.2v-7.2c1.3.9 2.8 1.7 4.3 2.2 1.5.5 2.9.8 4.2.8 1.6 0 2.9-.2 3.6-.7.8-.5 1.2-1.2 1.2-2.3 0-1-.4-1.8-1.2-2.6-.8-.7-2.4-1.5-4.6-2.4-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4c0-2.8 1.1-5.1 3.3-6.9 2.2-1.8 5.1-2.7 8.6-2.7 1.1 0 2.3.1 3.6.4s2.5.6 3.4.9V34c-1-.6-2.1-1.2-3.4-1.7-1.3-.5-2.6-.7-3.8-.7-1.4 0-2.5.3-3.2.8-.7.7-1.1 1.4-1.1 2.4zm16.4 7.8c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.7-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.6 1.9-2.4 4.4-2.4 7.7zm48.4-9.7H312v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2 1.1-5.9 3.2-8s4.8-3.1 8.1-3.1c.9 0 1.7.1 2.4.1s1.3.2 1.8.4V18c-.2-.1-.7-.3-1.3-.5-.6-.2-1.3-.3-2.1-.3-1.5 0-2.7.5-3.5 1.4-.8.9-1.2 2.4-1.2 4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4V47c0 1.9.4 3.2 1 4 .7.8 1.8 1.2 3.3 1.2.4 0 .9-.1 1.5-.3.6-.2 1.1-.4 1.5-.7v6c-.5.3-1.2.5-2.3.7-1.1.2-2.1.3-3.2.3-3.1 0-5.4-.8-6.9-2.4-1.5-1.6-2.3-4.1-2.3-7.4l.1-15.8z"
      />
      <path fill="#F25022" d="M0 0h34.2v34.2H0z" />
      <path fill="#7FBA00" d="M37.8 0H72v34.2H37.8z" />
      <path fill="#00A4EF" d="M0 37.8h34.2V72H0z" />
      <path fill="#FFB900" d="M37.8 37.8H72V72H37.8z" />
    </svg>
    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 79.46" width="291" height="79.46">
      <title>LinkedIn</title>
      <path
        d="M239.33 95.036c0 2.96 2.46 5.361 5.495 5.361h63.376c3.035 0 5.496-2.401 5.496-5.361V30.919c0-2.961-2.46-5.361-5.496-5.361h-63.376c-3.035 0-5.495 2.4-5.495 5.361v64.117z"
        style={{
          fill: 'inherit',
          fillOpacity: 1,
          fillRule: 'nonzero',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
      <path
        d="M31.152 37.709h31.035v10.189H42.383v38.874H31.152V37.709zM77.9 37.709v33.793H66.668V37.709H77.9zm-5.616 38.407c3.917 0 6.355 2.595 6.355 5.84-.073 3.315-2.438 5.837-6.28 5.837-3.843 0-6.355-2.522-6.355-5.837 0-3.245 2.437-5.84 6.207-5.84h.073zM83.115 37.709h11.233v18.872c0 1.01.073 2.019.37 2.741.811 2.017 2.66 4.107 5.763 4.107 4.065 0 5.69-3.1 5.69-7.64v-18.08h11.232v19.377c0 10.38-5.542 15.21-12.932 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.9H83.116c.147-3.171 0-33.793 0-33.793zM133.249 86.772h-11.233V37.709h11.233v10.956l2.807 3.534 8.794-14.49h13.818l-14.779 20.977 12.932 14.272h-13.522s-9.237-12.769-10.05-14.283v28.097z"
        style={{
          fill: 'inherit',
          fillOpacity: 1,
          fillRule: 'evenodd',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
      <path
        d="M188.706 51.805c.148.868.37 2.533.37 4.415 0 8.736-4.435 17.604-16.11 17.604-12.488 0-18.252-9.877-18.252-18.835 0-11.08 7.02-18 19.287-18 4.877 0 9.384.72 13.08 2.234l-1.48 7.418c-3.029-1.005-6.132-1.507-9.974-1.507-5.247 0-9.828 2.153-10.198 6.743l23.277-.07zm-23.35 7.599c.295 2.884 2.216 7.138 7.02 7.138 5.097 0 6.28-4.543 6.28-7.138h-13.3zM216.801 86.772V69.788h-.147c-1.627 2.377-5.026 3.963-9.533 3.963-8.646 0-16.257-6.92-16.184-18.741 0-10.958 6.873-18.094 15.444-18.094 4.656 0 9.09 2.019 11.306 5.912h.222l.444-5.119h9.976c-.148 2.379-.297 6.488-.297 10.524v38.539h-11.231zm0-33.421c0-.864-.074-1.73-.222-2.45-.664-3.1-3.325-5.262-6.576-5.262-4.656 0-7.685 3.748-7.685 9.659 0 5.55 2.586 10.019 7.758 10.019 3.473 0 5.912-2.378 6.578-5.333.147-.65.147-1.371.147-2.019v-4.614z"
        style={{
          fill: 'inherit',
          fillOpacity: 1,
          fillRule: 'evenodd',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
      <path
        d="M261.873 37.749v33.794H250.64V37.749h11.233zm-5.617 38.408c3.917 0 6.355 2.595 6.355 5.838-.073 3.316-2.438 5.839-6.28 5.839-3.843 0-6.355-2.523-6.355-5.839 0-3.243 2.438-5.838 6.207-5.838h.073zM268.088 37.749h11.232v18.872c0 1.01.073 2.019.37 2.741.812 2.018 2.66 4.108 5.763 4.108 4.065 0 5.69-3.099 5.69-7.642V37.749h11.232v19.377c0 10.38-5.541 15.21-12.931 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.901h-11.233c.148-3.171 0-33.794 0-33.794z"
        style={{
          fill: 'var(--brand-color-canvas-default)',
          fillOpacity: 1,
          fillRule: 'evenodd',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
    </svg>
  </LogoSuite.Logobar>
</LogoSuite>
```

### Optional heading and description

```jsx
<LogoSuite>
  <LogoSuite.Heading>The ultimate developer experience is here.</LogoSuite.Heading>
  <LogoSuite.Description>Trusted by the world’s leading organizations</LogoSuite.Description>
  <LogoSuite.Logobar>
    <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 16" width="45" height="16">
      <title>GitHub</title>
      <path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"></path>
    </svg>
    <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.6 72">
      <title>Microsoft</title>
      <path
        fill="#737373"
        d="M140.4 14.4v43.2h-7.5V23.7h-.1l-13.4 33.9h-5l-13.7-33.9h-.1v33.9h-6.9V14.4h10.8l12.4 32h.2l13.1-32h10.2zm6.2 3.3c0-1.2.4-2.2 1.3-3 .9-.8 1.9-1.2 3.1-1.2 1.3 0 2.4.4 3.2 1.2s1.3 1.8 1.3 3-.4 2.2-1.3 3c-.9.8-1.9 1.2-3.2 1.2s-2.3-.4-3.1-1.2c-.8-.9-1.3-1.9-1.3-3zm8.1 8.9v31h-7.3v-31h7.3zm22.1 25.7c1.1 0 2.3-.2 3.6-.8 1.3-.5 2.5-1.2 3.6-2v6.8c-1.2.7-2.5 1.2-4 1.5-1.5.3-3.1.5-4.9.5-4.6 0-8.3-1.4-11.1-4.3-2.9-2.9-4.3-6.6-4.3-11 0-5 1.5-9.1 4.4-12.3 2.9-3.2 7-4.8 12.4-4.8 1.4 0 2.8.2 4.1.5 1.4.3 2.5.8 3.3 1.2v7c-1.1-.8-2.3-1.5-3.4-1.9-1.2-.4-2.4-.7-3.6-.7-2.9 0-5.2.9-7 2.8s-2.6 4.4-2.6 7.6c0 3.1.9 5.6 2.6 7.3 1.7 1.7 4 2.6 6.9 2.6zm27.9-26.2c.6 0 1.1 0 1.6.1s.9.2 1.2.3v7.4c-.4-.3-.9-.6-1.7-.8s-1.6-.4-2.7-.4c-1.8 0-3.3.8-4.5 2.3s-1.9 3.8-1.9 7v15.6h-7.3v-31h7.3v4.9h.1c.7-1.7 1.7-3 3-4 1.4-.9 3-1.4 4.9-1.4zm3.2 16.5c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.8-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.7 1.9-2.4 4.4-2.4 7.7zm35-7.5c0 1 .3 1.9 1 2.5.7.6 2.1 1.3 4.4 2.2 2.9 1.2 5 2.5 6.1 3.9 1.2 1.5 1.8 3.2 1.8 5.3 0 2.9-1.1 5.2-3.4 7-2.2 1.8-5.3 2.6-9.1 2.6-1.3 0-2.7-.2-4.3-.5-1.6-.3-2.9-.7-4-1.2v-7.2c1.3.9 2.8 1.7 4.3 2.2 1.5.5 2.9.8 4.2.8 1.6 0 2.9-.2 3.6-.7.8-.5 1.2-1.2 1.2-2.3 0-1-.4-1.8-1.2-2.6-.8-.7-2.4-1.5-4.6-2.4-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4c0-2.8 1.1-5.1 3.3-6.9 2.2-1.8 5.1-2.7 8.6-2.7 1.1 0 2.3.1 3.6.4s2.5.6 3.4.9V34c-1-.6-2.1-1.2-3.4-1.7-1.3-.5-2.6-.7-3.8-.7-1.4 0-2.5.3-3.2.8-.7.7-1.1 1.4-1.1 2.4zm16.4 7.8c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.7-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.6 1.9-2.4 4.4-2.4 7.7zm48.4-9.7H312v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2 1.1-5.9 3.2-8s4.8-3.1 8.1-3.1c.9 0 1.7.1 2.4.1s1.3.2 1.8.4V18c-.2-.1-.7-.3-1.3-.5-.6-.2-1.3-.3-2.1-.3-1.5 0-2.7.5-3.5 1.4-.8.9-1.2 2.4-1.2 4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4V47c0 1.9.4 3.2 1 4 .7.8 1.8 1.2 3.3 1.2.4 0 .9-.1 1.5-.3.6-.2 1.1-.4 1.5-.7v6c-.5.3-1.2.5-2.3.7-1.1.2-2.1.3-3.2.3-3.1 0-5.4-.8-6.9-2.4-1.5-1.6-2.3-4.1-2.3-7.4l.1-15.8z"
      />
      <path fill="#F25022" d="M0 0h34.2v34.2H0z" />
      <path fill="#7FBA00" d="M37.8 0H72v34.2H37.8z" />
      <path fill="#00A4EF" d="M0 37.8h34.2V72H0z" />
      <path fill="#FFB900" d="M37.8 37.8H72V72H37.8z" />
    </svg>
    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 79.46" width="291" height="79.46">
      <title>LinkedIn</title>
      <path
        d="M239.33 95.036c0 2.96 2.46 5.361 5.495 5.361h63.376c3.035 0 5.496-2.401 5.496-5.361V30.919c0-2.961-2.46-5.361-5.496-5.361h-63.376c-3.035 0-5.495 2.4-5.495 5.361v64.117z"
        style={{
          fill: 'inherit',
          fillOpacity: 1,
          fillRule: 'nonzero',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
      <path
        d="M31.152 37.709h31.035v10.189H42.383v38.874H31.152V37.709zM77.9 37.709v33.793H66.668V37.709H77.9zm-5.616 38.407c3.917 0 6.355 2.595 6.355 5.84-.073 3.315-2.438 5.837-6.28 5.837-3.843 0-6.355-2.522-6.355-5.837 0-3.245 2.437-5.84 6.207-5.84h.073zM83.115 37.709h11.233v18.872c0 1.01.073 2.019.37 2.741.811 2.017 2.66 4.107 5.763 4.107 4.065 0 5.69-3.1 5.69-7.64v-18.08h11.232v19.377c0 10.38-5.542 15.21-12.932 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.9H83.116c.147-3.171 0-33.793 0-33.793zM133.249 86.772h-11.233V37.709h11.233v10.956l2.807 3.534 8.794-14.49h13.818l-14.779 20.977 12.932 14.272h-13.522s-9.237-12.769-10.05-14.283v28.097z"
        style={{
          fill: 'inherit',
          fillOpacity: 1,
          fillRule: 'evenodd',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
      <path
        d="M188.706 51.805c.148.868.37 2.533.37 4.415 0 8.736-4.435 17.604-16.11 17.604-12.488 0-18.252-9.877-18.252-18.835 0-11.08 7.02-18 19.287-18 4.877 0 9.384.72 13.08 2.234l-1.48 7.418c-3.029-1.005-6.132-1.507-9.974-1.507-5.247 0-9.828 2.153-10.198 6.743l23.277-.07zm-23.35 7.599c.295 2.884 2.216 7.138 7.02 7.138 5.097 0 6.28-4.543 6.28-7.138h-13.3zM216.801 86.772V69.788h-.147c-1.627 2.377-5.026 3.963-9.533 3.963-8.646 0-16.257-6.92-16.184-18.741 0-10.958 6.873-18.094 15.444-18.094 4.656 0 9.09 2.019 11.306 5.912h.222l.444-5.119h9.976c-.148 2.379-.297 6.488-.297 10.524v38.539h-11.231zm0-33.421c0-.864-.074-1.73-.222-2.45-.664-3.1-3.325-5.262-6.576-5.262-4.656 0-7.685 3.748-7.685 9.659 0 5.55 2.586 10.019 7.758 10.019 3.473 0 5.912-2.378 6.578-5.333.147-.65.147-1.371.147-2.019v-4.614z"
        style={{
          fill: 'inherit',
          fillOpacity: 1,
          fillRule: 'evenodd',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
      <path
        d="M261.873 37.749v33.794H250.64V37.749h11.233zm-5.617 38.408c3.917 0 6.355 2.595 6.355 5.838-.073 3.316-2.438 5.839-6.28 5.839-3.843 0-6.355-2.523-6.355-5.839 0-3.243 2.438-5.838 6.207-5.838h.073zM268.088 37.749h11.232v18.872c0 1.01.073 2.019.37 2.741.812 2.018 2.66 4.108 5.763 4.108 4.065 0 5.69-3.099 5.69-7.642V37.749h11.232v19.377c0 10.38-5.541 15.21-12.931 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.901h-11.233c.148-3.171 0-33.794 0-33.794z"
        style={{
          fill: 'var(--brand-color-canvas-default)',
          fillOpacity: 1,
          fillRule: 'evenodd',
          stroke: 'none',
        }}
        transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
      />
    </svg>
  </LogoSuite.Logobar>
</LogoSuite>
```

### Visually hidden heading

A heading element must be present as it serves as a navigation hook for assistive technology. Use the `visuallyHidden` prop if you need to hide the heading.

```jsx
<LogoSuite>
  <LogoSuite.Heading visuallyHidden>The ultimate developer experience is here.</LogoSuite.Heading>
  <LogoSuite.Logobar>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
  </LogoSuite.Logobar>
</LogoSuite>
```

### Alternative heading levels

Heading elements will default to being `h2` elements. Use the `as` prop to change the level of the heading.

```jsx
<LogoSuite>
  <LogoSuite.Heading as="h4">The ultimate developer experience is here.</LogoSuite.Heading>
  <LogoSuite.Description>The heading above is rendered as a h4</LogoSuite.Description>
  <LogoSuite.Logobar>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
  </LogoSuite.Logobar>
</LogoSuite>
```

### Marquee

```jsx
<Stack direction="vertical" style={{maxWidth: '100%'}}>
  <LogoSuite>
    <LogoSuite.Heading>Speed: Normal</LogoSuite.Heading>
    <LogoSuite.Logobar marquee marqueeSpeed="normal">
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
    </LogoSuite.Logobar>
  </LogoSuite>
  <br />
  <LogoSuite>
    <LogoSuite.Heading>Speed: Slow</LogoSuite.Heading>
    <LogoSuite.Logobar marquee marqueeSpeed="slow">
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
    </LogoSuite.Logobar>
  </LogoSuite>
</Stack>
```

### Alternative alignment

`LogoSuite` will center content by default. You may optionally align the content to the `start`, or `justify` it.

```jsx
<Stack direction="vertical">
  <LogoSuite align="start">
    <LogoSuite.Description>Start</LogoSuite.Description>
    <LogoSuite.Logobar>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
    </LogoSuite.Logobar>
  </LogoSuite>
  <br />
  <LogoSuite align="justify">
    <LogoSuite.Description>Justified</LogoSuite.Description>
    <LogoSuite.Logobar>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
      <svg role="img" viewBox="0 0 300 100">
        <title>Placeholder logo</title>
        <rect width="100%" height="100%" />
      </svg>
    </LogoSuite.Logobar>
  </LogoSuite>
</Stack>
```

### Variants

Logobars will automatically select the appropriate variant based on the number of logos in the suite. 5 or fewer logos will use the `emphasis` variant, while 6 or more will use the `muted` variant.

Logobars using the `emphasis` variant will appear with relatively higher contrast and in a larger size when compared to the `muted` variant.

```jsx
<Stack direction="vertical">
  <LogoSuite>
    <LogoSuite.Heading visuallyHidden>Emphasis example</LogoSuite.Heading>
    <LogoSuite.Description>Emphasis</LogoSuite.Description>
    <LogoSuite.Logobar variant="emphasis">
      <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 16" width="45" height="16">
        <title>GitHub</title>
        <path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"></path>
      </svg>
      <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.6 72">
        <title>Microsoft</title>
        <path
          fill="#737373"
          d="M140.4 14.4v43.2h-7.5V23.7h-.1l-13.4 33.9h-5l-13.7-33.9h-.1v33.9h-6.9V14.4h10.8l12.4 32h.2l13.1-32h10.2zm6.2 3.3c0-1.2.4-2.2 1.3-3 .9-.8 1.9-1.2 3.1-1.2 1.3 0 2.4.4 3.2 1.2s1.3 1.8 1.3 3-.4 2.2-1.3 3c-.9.8-1.9 1.2-3.2 1.2s-2.3-.4-3.1-1.2c-.8-.9-1.3-1.9-1.3-3zm8.1 8.9v31h-7.3v-31h7.3zm22.1 25.7c1.1 0 2.3-.2 3.6-.8 1.3-.5 2.5-1.2 3.6-2v6.8c-1.2.7-2.5 1.2-4 1.5-1.5.3-3.1.5-4.9.5-4.6 0-8.3-1.4-11.1-4.3-2.9-2.9-4.3-6.6-4.3-11 0-5 1.5-9.1 4.4-12.3 2.9-3.2 7-4.8 12.4-4.8 1.4 0 2.8.2 4.1.5 1.4.3 2.5.8 3.3 1.2v7c-1.1-.8-2.3-1.5-3.4-1.9-1.2-.4-2.4-.7-3.6-.7-2.9 0-5.2.9-7 2.8s-2.6 4.4-2.6 7.6c0 3.1.9 5.6 2.6 7.3 1.7 1.7 4 2.6 6.9 2.6zm27.9-26.2c.6 0 1.1 0 1.6.1s.9.2 1.2.3v7.4c-.4-.3-.9-.6-1.7-.8s-1.6-.4-2.7-.4c-1.8 0-3.3.8-4.5 2.3s-1.9 3.8-1.9 7v15.6h-7.3v-31h7.3v4.9h.1c.7-1.7 1.7-3 3-4 1.4-.9 3-1.4 4.9-1.4zm3.2 16.5c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.8-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.7 1.9-2.4 4.4-2.4 7.7zm35-7.5c0 1 .3 1.9 1 2.5.7.6 2.1 1.3 4.4 2.2 2.9 1.2 5 2.5 6.1 3.9 1.2 1.5 1.8 3.2 1.8 5.3 0 2.9-1.1 5.2-3.4 7-2.2 1.8-5.3 2.6-9.1 2.6-1.3 0-2.7-.2-4.3-.5-1.6-.3-2.9-.7-4-1.2v-7.2c1.3.9 2.8 1.7 4.3 2.2 1.5.5 2.9.8 4.2.8 1.6 0 2.9-.2 3.6-.7.8-.5 1.2-1.2 1.2-2.3 0-1-.4-1.8-1.2-2.6-.8-.7-2.4-1.5-4.6-2.4-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4c0-2.8 1.1-5.1 3.3-6.9 2.2-1.8 5.1-2.7 8.6-2.7 1.1 0 2.3.1 3.6.4s2.5.6 3.4.9V34c-1-.6-2.1-1.2-3.4-1.7-1.3-.5-2.6-.7-3.8-.7-1.4 0-2.5.3-3.2.8-.7.7-1.1 1.4-1.1 2.4zm16.4 7.8c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.7-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.6 1.9-2.4 4.4-2.4 7.7zm48.4-9.7H312v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2 1.1-5.9 3.2-8s4.8-3.1 8.1-3.1c.9 0 1.7.1 2.4.1s1.3.2 1.8.4V18c-.2-.1-.7-.3-1.3-.5-.6-.2-1.3-.3-2.1-.3-1.5 0-2.7.5-3.5 1.4-.8.9-1.2 2.4-1.2 4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4V47c0 1.9.4 3.2 1 4 .7.8 1.8 1.2 3.3 1.2.4 0 .9-.1 1.5-.3.6-.2 1.1-.4 1.5-.7v6c-.5.3-1.2.5-2.3.7-1.1.2-2.1.3-3.2.3-3.1 0-5.4-.8-6.9-2.4-1.5-1.6-2.3-4.1-2.3-7.4l.1-15.8z"
        />
        <path fill="#F25022" d="M0 0h34.2v34.2H0z" />
        <path fill="#7FBA00" d="M37.8 0H72v34.2H37.8z" />
        <path fill="#00A4EF" d="M0 37.8h34.2V72H0z" />
        <path fill="#FFB900" d="M37.8 37.8H72V72H37.8z" />
      </svg>
      <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 79.46" width="291" height="79.46">
        <title>LinkedIn</title>
        <path
          d="M239.33 95.036c0 2.96 2.46 5.361 5.495 5.361h63.376c3.035 0 5.496-2.401 5.496-5.361V30.919c0-2.961-2.46-5.361-5.496-5.361h-63.376c-3.035 0-5.495 2.4-5.495 5.361v64.117z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'nonzero',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M31.152 37.709h31.035v10.189H42.383v38.874H31.152V37.709zM77.9 37.709v33.793H66.668V37.709H77.9zm-5.616 38.407c3.917 0 6.355 2.595 6.355 5.84-.073 3.315-2.438 5.837-6.28 5.837-3.843 0-6.355-2.522-6.355-5.837 0-3.245 2.437-5.84 6.207-5.84h.073zM83.115 37.709h11.233v18.872c0 1.01.073 2.019.37 2.741.811 2.017 2.66 4.107 5.763 4.107 4.065 0 5.69-3.1 5.69-7.64v-18.08h11.232v19.377c0 10.38-5.542 15.21-12.932 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.9H83.116c.147-3.171 0-33.793 0-33.793zM133.249 86.772h-11.233V37.709h11.233v10.956l2.807 3.534 8.794-14.49h13.818l-14.779 20.977 12.932 14.272h-13.522s-9.237-12.769-10.05-14.283v28.097z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M188.706 51.805c.148.868.37 2.533.37 4.415 0 8.736-4.435 17.604-16.11 17.604-12.488 0-18.252-9.877-18.252-18.835 0-11.08 7.02-18 19.287-18 4.877 0 9.384.72 13.08 2.234l-1.48 7.418c-3.029-1.005-6.132-1.507-9.974-1.507-5.247 0-9.828 2.153-10.198 6.743l23.277-.07zm-23.35 7.599c.295 2.884 2.216 7.138 7.02 7.138 5.097 0 6.28-4.543 6.28-7.138h-13.3zM216.801 86.772V69.788h-.147c-1.627 2.377-5.026 3.963-9.533 3.963-8.646 0-16.257-6.92-16.184-18.741 0-10.958 6.873-18.094 15.444-18.094 4.656 0 9.09 2.019 11.306 5.912h.222l.444-5.119h9.976c-.148 2.379-.297 6.488-.297 10.524v38.539h-11.231zm0-33.421c0-.864-.074-1.73-.222-2.45-.664-3.1-3.325-5.262-6.576-5.262-4.656 0-7.685 3.748-7.685 9.659 0 5.55 2.586 10.019 7.758 10.019 3.473 0 5.912-2.378 6.578-5.333.147-.65.147-1.371.147-2.019v-4.614z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M261.873 37.749v33.794H250.64V37.749h11.233zm-5.617 38.408c3.917 0 6.355 2.595 6.355 5.838-.073 3.316-2.438 5.839-6.28 5.839-3.843 0-6.355-2.523-6.355-5.839 0-3.243 2.438-5.838 6.207-5.838h.073zM268.088 37.749h11.232v18.872c0 1.01.073 2.019.37 2.741.812 2.018 2.66 4.108 5.763 4.108 4.065 0 5.69-3.099 5.69-7.642V37.749h11.232v19.377c0 10.38-5.541 15.21-12.931 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.901h-11.233c.148-3.171 0-33.794 0-33.794z"
          style={{
            fill: 'var(--brand-color-canvas-default)',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
      </svg>
    </LogoSuite.Logobar>
  </LogoSuite>
  <br />
  <LogoSuite>
    <LogoSuite.Heading visuallyHidden>Muted example</LogoSuite.Heading>
    <LogoSuite.Description>Muted</LogoSuite.Description>
    <LogoSuite.Logobar variant="muted">
      <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 16" width="45" height="16">
        <title>GitHub</title>
        <path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"></path>
      </svg>
      <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.6 72">
        <title>Microsoft</title>
        <path
          fill="#737373"
          d="M140.4 14.4v43.2h-7.5V23.7h-.1l-13.4 33.9h-5l-13.7-33.9h-.1v33.9h-6.9V14.4h10.8l12.4 32h.2l13.1-32h10.2zm6.2 3.3c0-1.2.4-2.2 1.3-3 .9-.8 1.9-1.2 3.1-1.2 1.3 0 2.4.4 3.2 1.2s1.3 1.8 1.3 3-.4 2.2-1.3 3c-.9.8-1.9 1.2-3.2 1.2s-2.3-.4-3.1-1.2c-.8-.9-1.3-1.9-1.3-3zm8.1 8.9v31h-7.3v-31h7.3zm22.1 25.7c1.1 0 2.3-.2 3.6-.8 1.3-.5 2.5-1.2 3.6-2v6.8c-1.2.7-2.5 1.2-4 1.5-1.5.3-3.1.5-4.9.5-4.6 0-8.3-1.4-11.1-4.3-2.9-2.9-4.3-6.6-4.3-11 0-5 1.5-9.1 4.4-12.3 2.9-3.2 7-4.8 12.4-4.8 1.4 0 2.8.2 4.1.5 1.4.3 2.5.8 3.3 1.2v7c-1.1-.8-2.3-1.5-3.4-1.9-1.2-.4-2.4-.7-3.6-.7-2.9 0-5.2.9-7 2.8s-2.6 4.4-2.6 7.6c0 3.1.9 5.6 2.6 7.3 1.7 1.7 4 2.6 6.9 2.6zm27.9-26.2c.6 0 1.1 0 1.6.1s.9.2 1.2.3v7.4c-.4-.3-.9-.6-1.7-.8s-1.6-.4-2.7-.4c-1.8 0-3.3.8-4.5 2.3s-1.9 3.8-1.9 7v15.6h-7.3v-31h7.3v4.9h.1c.7-1.7 1.7-3 3-4 1.4-.9 3-1.4 4.9-1.4zm3.2 16.5c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.8-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.7 1.9-2.4 4.4-2.4 7.7zm35-7.5c0 1 .3 1.9 1 2.5.7.6 2.1 1.3 4.4 2.2 2.9 1.2 5 2.5 6.1 3.9 1.2 1.5 1.8 3.2 1.8 5.3 0 2.9-1.1 5.2-3.4 7-2.2 1.8-5.3 2.6-9.1 2.6-1.3 0-2.7-.2-4.3-.5-1.6-.3-2.9-.7-4-1.2v-7.2c1.3.9 2.8 1.7 4.3 2.2 1.5.5 2.9.8 4.2.8 1.6 0 2.9-.2 3.6-.7.8-.5 1.2-1.2 1.2-2.3 0-1-.4-1.8-1.2-2.6-.8-.7-2.4-1.5-4.6-2.4-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4c0-2.8 1.1-5.1 3.3-6.9 2.2-1.8 5.1-2.7 8.6-2.7 1.1 0 2.3.1 3.6.4s2.5.6 3.4.9V34c-1-.6-2.1-1.2-3.4-1.7-1.3-.5-2.6-.7-3.8-.7-1.4 0-2.5.3-3.2.8-.7.7-1.1 1.4-1.1 2.4zm16.4 7.8c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.7-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.6 1.9-2.4 4.4-2.4 7.7zm48.4-9.7H312v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2 1.1-5.9 3.2-8s4.8-3.1 8.1-3.1c.9 0 1.7.1 2.4.1s1.3.2 1.8.4V18c-.2-.1-.7-.3-1.3-.5-.6-.2-1.3-.3-2.1-.3-1.5 0-2.7.5-3.5 1.4-.8.9-1.2 2.4-1.2 4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4V47c0 1.9.4 3.2 1 4 .7.8 1.8 1.2 3.3 1.2.4 0 .9-.1 1.5-.3.6-.2 1.1-.4 1.5-.7v6c-.5.3-1.2.5-2.3.7-1.1.2-2.1.3-3.2.3-3.1 0-5.4-.8-6.9-2.4-1.5-1.6-2.3-4.1-2.3-7.4l.1-15.8z"
        />
        <path fill="#F25022" d="M0 0h34.2v34.2H0z" />
        <path fill="#7FBA00" d="M37.8 0H72v34.2H37.8z" />
        <path fill="#00A4EF" d="M0 37.8h34.2V72H0z" />
        <path fill="#FFB900" d="M37.8 37.8H72V72H37.8z" />
      </svg>
      <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 79.46" width="291" height="79.46">
        <title>LinkedIn</title>
        <path
          d="M239.33 95.036c0 2.96 2.46 5.361 5.495 5.361h63.376c3.035 0 5.496-2.401 5.496-5.361V30.919c0-2.961-2.46-5.361-5.496-5.361h-63.376c-3.035 0-5.495 2.4-5.495 5.361v64.117z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'nonzero',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M31.152 37.709h31.035v10.189H42.383v38.874H31.152V37.709zM77.9 37.709v33.793H66.668V37.709H77.9zm-5.616 38.407c3.917 0 6.355 2.595 6.355 5.84-.073 3.315-2.438 5.837-6.28 5.837-3.843 0-6.355-2.522-6.355-5.837 0-3.245 2.437-5.84 6.207-5.84h.073zM83.115 37.709h11.233v18.872c0 1.01.073 2.019.37 2.741.811 2.017 2.66 4.107 5.763 4.107 4.065 0 5.69-3.1 5.69-7.64v-18.08h11.232v19.377c0 10.38-5.542 15.21-12.932 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.9H83.116c.147-3.171 0-33.793 0-33.793zM133.249 86.772h-11.233V37.709h11.233v10.956l2.807 3.534 8.794-14.49h13.818l-14.779 20.977 12.932 14.272h-13.522s-9.237-12.769-10.05-14.283v28.097z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M188.706 51.805c.148.868.37 2.533.37 4.415 0 8.736-4.435 17.604-16.11 17.604-12.488 0-18.252-9.877-18.252-18.835 0-11.08 7.02-18 19.287-18 4.877 0 9.384.72 13.08 2.234l-1.48 7.418c-3.029-1.005-6.132-1.507-9.974-1.507-5.247 0-9.828 2.153-10.198 6.743l23.277-.07zm-23.35 7.599c.295 2.884 2.216 7.138 7.02 7.138 5.097 0 6.28-4.543 6.28-7.138h-13.3zM216.801 86.772V69.788h-.147c-1.627 2.377-5.026 3.963-9.533 3.963-8.646 0-16.257-6.92-16.184-18.741 0-10.958 6.873-18.094 15.444-18.094 4.656 0 9.09 2.019 11.306 5.912h.222l.444-5.119h9.976c-.148 2.379-.297 6.488-.297 10.524v38.539h-11.231zm0-33.421c0-.864-.074-1.73-.222-2.45-.664-3.1-3.325-5.262-6.576-5.262-4.656 0-7.685 3.748-7.685 9.659 0 5.55 2.586 10.019 7.758 10.019 3.473 0 5.912-2.378 6.578-5.333.147-.65.147-1.371.147-2.019v-4.614z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M261.873 37.749v33.794H250.64V37.749h11.233zm-5.617 38.408c3.917 0 6.355 2.595 6.355 5.838-.073 3.316-2.438 5.839-6.28 5.839-3.843 0-6.355-2.523-6.355-5.839 0-3.243 2.438-5.838 6.207-5.838h.073zM268.088 37.749h11.232v18.872c0 1.01.073 2.019.37 2.741.812 2.018 2.66 4.108 5.763 4.108 4.065 0 5.69-3.099 5.69-7.642V37.749h11.232v19.377c0 10.38-5.541 15.21-12.931 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.901h-11.233c.148-3.171 0-33.794 0-33.794z"
          style={{
            fill: 'var(--brand-color-canvas-default)',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
      </svg>
    </LogoSuite.Logobar>
  </LogoSuite>
</Stack>
```

### Gridline expressive variant

The `gridline-expressive` variant displays the logo suite in a side-by-side layout with heading/description on the left and logos on the right, separated by a vertical border.

```jsx
<LogoSuite variant="gridline-expressive">
  <LogoSuite.Heading>Trusted by the world's leading organizations</LogoSuite.Heading>
  <LogoSuite.Logobar marquee>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
  </LogoSuite.Logobar>
</LogoSuite>
```

### Takeover button

The `takeoverButton` prop on `LogoSuite.Logobar` adds an interactive hover effect that reveals a call-to-action (in the form of a anchor-based button).

> The takeoverButton prop cannot be used with the marquee prop.

```jsx
<LogoSuite variant="gridline-expressive">
  <LogoSuite.Heading>Hover over the logos</LogoSuite.Heading>
  <LogoSuite.Logobar takeoverButton={{label: 'View customer stories', href: '/customers'}}>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
    <svg role="img" viewBox="0 0 300 100">
      <title>Placeholder logo</title>
      <rect width="100%" height="100%" />
    </svg>
  </LogoSuite.Logobar>
</LogoSuite>
```

### Gap

`LogoSuite.Logobar` supports both `default` and `condensed` gap between logos.

```jsx
<Stack direction="vertical">
  <LogoSuite>
    <LogoSuite.Heading visuallyHidden>Default gap</LogoSuite.Heading>
    <LogoSuite.Description>Default gap</LogoSuite.Description>
    <LogoSuite.Logobar variant="muted">
      <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 16" width="45" height="16">
        <title>GitHub</title>
        <path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"></path>
      </svg>
      <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.6 72">
        <title>Microsoft</title>
        <path
          fill="#737373"
          d="M140.4 14.4v43.2h-7.5V23.7h-.1l-13.4 33.9h-5l-13.7-33.9h-.1v33.9h-6.9V14.4h10.8l12.4 32h.2l13.1-32h10.2zm6.2 3.3c0-1.2.4-2.2 1.3-3 .9-.8 1.9-1.2 3.1-1.2 1.3 0 2.4.4 3.2 1.2s1.3 1.8 1.3 3-.4 2.2-1.3 3c-.9.8-1.9 1.2-3.2 1.2s-2.3-.4-3.1-1.2c-.8-.9-1.3-1.9-1.3-3zm8.1 8.9v31h-7.3v-31h7.3zm22.1 25.7c1.1 0 2.3-.2 3.6-.8 1.3-.5 2.5-1.2 3.6-2v6.8c-1.2.7-2.5 1.2-4 1.5-1.5.3-3.1.5-4.9.5-4.6 0-8.3-1.4-11.1-4.3-2.9-2.9-4.3-6.6-4.3-11 0-5 1.5-9.1 4.4-12.3 2.9-3.2 7-4.8 12.4-4.8 1.4 0 2.8.2 4.1.5 1.4.3 2.5.8 3.3 1.2v7c-1.1-.8-2.3-1.5-3.4-1.9-1.2-.4-2.4-.7-3.6-.7-2.9 0-5.2.9-7 2.8s-2.6 4.4-2.6 7.6c0 3.1.9 5.6 2.6 7.3 1.7 1.7 4 2.6 6.9 2.6zm27.9-26.2c.6 0 1.1 0 1.6.1s.9.2 1.2.3v7.4c-.4-.3-.9-.6-1.7-.8s-1.6-.4-2.7-.4c-1.8 0-3.3.8-4.5 2.3s-1.9 3.8-1.9 7v15.6h-7.3v-31h7.3v4.9h.1c.7-1.7 1.7-3 3-4 1.4-.9 3-1.4 4.9-1.4zm3.2 16.5c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.8-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.7 1.9-2.4 4.4-2.4 7.7zm35-7.5c0 1 .3 1.9 1 2.5.7.6 2.1 1.3 4.4 2.2 2.9 1.2 5 2.5 6.1 3.9 1.2 1.5 1.8 3.2 1.8 5.3 0 2.9-1.1 5.2-3.4 7-2.2 1.8-5.3 2.6-9.1 2.6-1.3 0-2.7-.2-4.3-.5-1.6-.3-2.9-.7-4-1.2v-7.2c1.3.9 2.8 1.7 4.3 2.2 1.5.5 2.9.8 4.2.8 1.6 0 2.9-.2 3.6-.7.8-.5 1.2-1.2 1.2-2.3 0-1-.4-1.8-1.2-2.6-.8-.7-2.4-1.5-4.6-2.4-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4c0-2.8 1.1-5.1 3.3-6.9 2.2-1.8 5.1-2.7 8.6-2.7 1.1 0 2.3.1 3.6.4s2.5.6 3.4.9V34c-1-.6-2.1-1.2-3.4-1.7-1.3-.5-2.6-.7-3.8-.7-1.4 0-2.5.3-3.2.8-.7.7-1.1 1.4-1.1 2.4zm16.4 7.8c0-5.1 1.5-9.2 4.3-12.2 2.9-3 6.9-4.5 12-4.5 4.8 0 8.6 1.4 11.3 4.3s4.1 6.8 4.1 11.7c0 5-1.5 9-4.3 12-2.9 3-6.8 4.5-11.8 4.5-4.8 0-8.6-1.4-11.4-4.2-2.7-2.9-4.2-6.8-4.2-11.6zm7.6-.3c0 3.2.7 5.7 2.2 7.4s3.6 2.6 6.3 2.6c2.6 0 4.7-.8 6.1-2.6 1.4-1.7 2.1-4.2 2.1-7.6 0-3.3-.7-5.8-2.1-7.6-1.4-1.7-3.5-2.6-6-2.6-2.7 0-4.7.9-6.2 2.7-1.6 1.9-2.4 4.4-2.4 7.7zm48.4-9.7H312v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2 1.1-5.9 3.2-8s4.8-3.1 8.1-3.1c.9 0 1.7.1 2.4.1s1.3.2 1.8.4V18c-.2-.1-.7-.3-1.3-.5-.6-.2-1.3-.3-2.1-.3-1.5 0-2.7.5-3.5 1.4-.8.9-1.2 2.4-1.2 4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4V47c0 1.9.4 3.2 1 4 .7.8 1.8 1.2 3.3 1.2.4 0 .9-.1 1.5-.3.6-.2 1.1-.4 1.5-.7v6c-.5.3-1.2.5-2.3.7-1.1.2-2.1.3-3.2.3-3.1 0-5.4-.8-6.9-2.4-1.5-1.6-2.3-4.1-2.3-7.4l.1-15.8z"
        />
        <path fill="#F25022" d="M0 0h34.2v34.2H0z" />
        <path fill="#7FBA00" d="M37.8 0H72v34.2H37.8z" />
        <path fill="#00A4EF" d="M0 37.8h34.2V72H0z" />
        <path fill="#FFB900" d="M37.8 37.8H72V72H37.8z" />
      </svg>
      <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 79.46" width="291" height="79.46">
        <title>LinkedIn</title>
        <path
          d="M239.33 95.036c0 2.96 2.46 5.361 5.495 5.361h63.376c3.035 0 5.496-2.401 5.496-5.361V30.919c0-2.961-2.46-5.361-5.496-5.361h-63.376c-3.035 0-5.495 2.4-5.495 5.361v64.117z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'nonzero',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M31.152 37.709h31.035v10.189H42.383v38.874H31.152V37.709zM77.9 37.709v33.793H66.668V37.709H77.9zm-5.616 38.407c3.917 0 6.355 2.595 6.355 5.84-.073 3.315-2.438 5.837-6.28 5.837-3.843 0-6.355-2.522-6.355-5.837 0-3.245 2.437-5.84 6.207-5.84h.073zM83.115 37.709h11.233v18.872c0 1.01.073 2.019.37 2.741.811 2.017 2.66 4.107 5.763 4.107 4.065 0 5.69-3.1 5.69-7.64v-18.08h11.232v19.377c0 10.38-5.542 15.21-12.932 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.9H83.116c.147-3.171 0-33.793 0-33.793zM133.249 86.772h-11.233V37.709h11.233v10.956l2.807 3.534 8.794-14.49h13.818l-14.779 20.977 12.932 14.272h-13.522s-9.237-12.769-10.05-14.283v28.097z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M188.706 51.805c.148.868.37 2.533.37 4.415 0 8.736-4.435 17.604-16.11 17.604-12.488 0-18.252-9.877-18.252-18.835 0-11.08 7.02-18 19.287-18 4.877 0 9.384.72 13.08 2.234l-1.48 7.418c-3.029-1.005-6.132-1.507-9.974-1.507-5.247 0-9.828 2.153-10.198 6.743l23.277-.07zm-23.35 7.599c.295 2.884 2.216 7.138 7.02 7.138 5.097 0 6.28-4.543 6.28-7.138h-13.3zM216.801 86.772V69.788h-.147c-1.627 2.377-5.026 3.963-9.533 3.963-8.646 0-16.257-6.92-16.184-18.741 0-10.958 6.873-18.094 15.444-18.094 4.656 0 9.09 2.019 11.306 5.912h.222l.444-5.119h9.976c-.148 2.379-.297 6.488-.297 10.524v38.539h-11.231zm0-33.421c0-.864-.074-1.73-.222-2.45-.664-3.1-3.325-5.262-6.576-5.262-4.656 0-7.685 3.748-7.685 9.659 0 5.55 2.586 10.019 7.758 10.019 3.473 0 5.912-2.378 6.578-5.333.147-.65.147-1.371.147-2.019v-4.614z"
          style={{
            fill: 'inherit',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
        <path
          d="M261.873 37.749v33.794H250.64V37.749h11.233zm-5.617 38.408c3.917 0 6.355 2.595 6.355 5.838-.073 3.316-2.438 5.839-6.28 5.839-3.843 0-6.355-2.523-6.355-5.839 0-3.243 2.438-5.838 6.207-5.838h.073zM268.088 37.749h11.232v18.872c0 1.01.073 2.019.37 2.741.812 2.018 2.66 4.108 5.763 4.108 4.065 0 5.69-3.099 5.69-7.642V37.749h11.232v19.377c0 10.38-5.541 15.21-12.931 15.21-6.06 0-8.72-3.387-10.198-5.694h.075v4.901h-11.233c.148-3.171 0-33.794 0-33.794z"
          style={{
            fill: 'var(--brand-color-canvas-default)',
            fillOpacity: 1,
            fillRule: 'evenodd',
            stroke: 'none',
          }}
          transform="matrix(1.01883 0 0 -1.01883 -29.952 104.07)"
        />
      </svg>
    </LogoSuite.Logobar>
  </LogoSuite>
  <br />
  <LogoSuite>
    <LogoSuite.Heading visuallyHidden>Condensed gap</LogoSuite.Heading>
    <LogoSuite.Description>Condensed gap</LogoSuite.Description>
    <LogoSuite.Logobar variant="muted" gap="condensed">
      <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 16" width="45" height="16">
        <title>GitHub</title>
        <path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.