← Back to Components

Company Logo Web Component

A web component that displays the company logo with configurable properties and optional linking.

Features

• Displays the ‘Q-only’ icon by default, with option to show full logo
• Automatically adapts to light and dark themes
• Clickable with configurable link target
• Customizable height
• Automatically links to the company website
• Simple integration in toolbars and headers

Installation

Include the component in your project:

<script src="https://cdn.q360.ai/assets/components/company-logo/qds-company-logo.js" type="module"></script>

Or import it in your JavaScript:

import "https://cdn.q360.ai/assets/components/company-logo/qds-company-logo.js";

You can also load all components at once:

<script src="https://cdn.q360.ai/assets/components/index.js" type="module"></script>

Usage

Basic Usage with Default Settings

The simplest way to use the component with default settings:

<qds-company-logo></qds-company-logo>

This will display:

• The ‘Q-only’ logo that adapts to light/dark themes
• Height of 32px
• Linked to https://q360.ai
• Opens in a new tab when clicked

Q-only vs Full Logo

You can choose between the Q-only icon or the full logo:

<!-- Default: Q-only icon (blue in light mode, white in dark mode) -->
<qds-company-logo></qds-company-logo>

<!-- Full logo that adapts to light/dark themes -->
<qds-company-logo q-only="false"></qds-company-logo>

Customizing Attributes

You can customize the logo by setting attributes:

<qds-company-logo 
  src="https://example.com/logo.svg"
  alt="My Company Logo"
  height="48"
  href="https://example.com"
  target="_self"
  q-only="false">
</qds-company-logo>

Using in a Toolbar

<qds-main-toolbar>
  <div slot="left">
    <hierarchical-menu></hierarchical-menu>
    <qds-company-logo></qds-company-logo>
    <qds-menu-spacer height="20"></qds-menu-spacer>
    <span style="font-size: 18px; font-weight: 500;">QUILT</span>
  </div>
</qds-main-toolbar>

Attributes

Attribute	Type	Description	Default
src	String	URL of the logo image	Based on q-only and theme settings
alt	String	Alternative text for the image	‘QCG Logo’
height	Number	Height of the logo in pixels	32
href	String	URL to link the logo to	‘https://q360.ai‘
target	String	Target for the link (_blank, _self)	‘_blank’
q-only	Boolean	Whether to use only the Q icon	true

Styling

The component can be styled through CSS variables:

qds-company-logo {
  --logo-margin: 12px; /* Adjust margin around the logo */
}

CSS Variables

Variable	Description	Default
--logo-margin	Margin around the logo	12px

Events

Event	Description
click	Fired when the logo is clicked (bubbles: true)

Browser Support

This component uses standard Web Component APIs and works in all modern browsers that support Custom Elements v1.