Skip to main content

Your opinion matters! Together with you, we want to continuously improve KoliBri. Share your ideas, wishes, or suggestions—quickly and easily.

KoliBri

Synonyms: Logo, Branding Element, Brand Symbol

Description: The KoliBri component renders the logo of the KoliBri Web Component Library. It enables a consistent display of the brand logo on websites and applications, with options for labeling and color customization.

Example​

Rendering the KoliBri logo with and without a label:

<kol-kolibri></kol-kolibri>
<kol-kolibri _labeled="false"></kol-kolibri>

Accessibility​

The KoliBri component was developed based on best practices for corporate logos:

  • Semantic labeling: The logo is marked as decorative or as a brand element depending on whether it is navigable.
  • Alternative rendering: The component should remain clearly visible in environments with high contrast mode enabled.
  • Responsive sizing: The logo adapts responsively to the container size and remains legible on all devices.

Usage​

Best Practices / Recommendations​

  • Consistent placement: Use the logo consistently in headers, footers, and navigation elements.
  • Mind the size: Ensure the logo is large enough to be recognized on mobile devices.
  • Color contrast: When using custom colors, ensure sufficient contrast against the background.
  • Responsive rendering: Adapt the logo container width to the available screen width.
  • Use labels purposefully: Enable the label in contexts where the logo alone would not be recognized.

Use Cases​

  • Header: Placement in the website header as a branding element
  • Footer: Integration into footers of websites and applications
  • Navigation: Use as a clickable logo in main navigation
  • Documentation pages: Branding on documentation and tutorial pages
  • Error pages: Display on 404 or error pages as a recognizable element
  • Print pages: Use in print-optimized views
  • Social media: Integration into digital media and metadata

FAQ​

Can I change the size of the logo?
The component automatically adapts to the width of its container. You can control the container size via CSS.

How can I use the logo as a link?
Wrap the <kol-kolibri> component with an <a> tag or place it inside a <kol-link-button> element.

What colors are valid for _color?
You can use any CSS color value or an object with backgroundColor and foregroundColor.

Playground​

Default logo with label:

Logo without label:

Functionality​

Control the label​

The component can be rendered with or without the "KoliBri" label. The default behavior shows the label.

<!-- With label (default) -->
<kol-kolibri></kol-kolibri>

<!-- Without label -->
<kol-kolibri _labeled="false"></kol-kolibri>

Customize the color​

The color of the logo can be customized via the _color attribute. The following formats are supported:

<!-- With a simple color (hex, RGB, named colors) -->
<kol-kolibri _color="#cc006e"></kol-kolibri>

<!-- With separate colors for background and foreground -->
<kol-kolibri _color='{ "backgroundColor": "#003c78", "foregroundColor": "#cc006e" }'></kol-kolibri>

Default color (blue #003c78):

Custom color (magenta #cc006e):

API​

Properties​

PropertyAttributeDescriptionTypeDefault
_color_colorDefines the color of the logo and label.string | undefined | { backgroundColor: string; foregroundColor: string; }'#003c78'
_labeled_labeledDefines whether the component has a label.boolean | undefinedtrue