Brand

The Brand component displays the the native web brand.

<div>
  <Brand />
</div>

Resizing the brand

The Brand is available in different sizes, sm, md, and lg. If you don't specify a size, it defaults to md.

<div>
  <Brand
    size="sm"
  />
  <hr />
  <Brand
    size="md"
  />
  <hr />
  <Brand
    size="lg"
  />
</div>


Minimizing the brand

The Brand is available in a minimized version. To use it, set its type property to minimal.

<div>
  <Brand
    size="sm"
    type="minimal"
  />
  <hr />
  <Brand
    size="md"
    type="minimal"
  />
  <hr />
  <Brand
    size="lg"
    type="minimal"
  />
</div>


Grayscaling the brand

The Brand is available in a grayscaled version. To use it, set its color property to monochrome. The grayscaled version is only available for the minimized Brand.

<div>
  <Brand
    color="monochrome"
    size="sm"
    type="minimal"
  />
  <hr />
  <Brand
    color="monochrome"
    size="md"
    type="minimal"
  />
  <hr />
  <Brand
    color="monochrome"
    size="lg"
    type="minimal"
  />
</div>


Making the brand interactive

The Brand is available as an interactive element. To make it interactive, set its isInteractive property to true. The interactive version is only available for the minimized Brand.

<div>
  <Brand
    isInteractive={true}
    size="sm"
    type="minimal"
  />
  <hr />
  <Brand
    isInteractive={true}
    size="md"
    type="minimal"
  />
  <hr />
  <Brand
    isInteractive={true}
    size="lg"
    type="minimal"
  />
  <hr />
  <Brand
    color="monochrome"
    isInteractive={true}
    size="sm"
    type="minimal"
  />
  <hr />
  <Brand
    color="monochrome"
    isInteractive={true}
    size="md"
    type="minimal"
  />
  <hr />
  <Brand
    color="monochrome"
    isInteractive={true}
    size="lg"
    type="minimal"
  />
</div>