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

This documentation is currently being revised and is in beta status. Content may still change.
This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

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.

Construction / Technik​

Playground​

Default logo with label:

Logo without label:

Functionality (with Code)​

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