bellhop by actabl

When to use

Use logo box in application headers to display the current product and enable switching between Actabl products.

Multi-Product Suite

Navigate between different products in the Actabl ecosystem.

Product Branding

Display current product logo for clear context and identity.

Quick Switching

Allow users to switch products without leaving the application.

When not to use

  • For single logos—use img element
  • When logos don't need special framing
  • For navigation—use proper navigation components
  • When logo size/spacing is handled by parent container

Logo Types

Supports logos for all products in the Actabl suite.

Actabl

Main Actabl suite platform

Alice

Housekeeping & Guest Services

Hotel Effectiveness

Labor planning solution

ProfitSword

Business Intelligence and Finance

Transcendent

Asset Management & CapEx

Features

Logo box includes features for product navigation.

Product Logos

Display branded logo for each product

Dropdown Menu

List all available products with descriptions

Current Product

Visual indicator showing active product

Product Descriptions

Brief description helps users identify each product

Best Practices

Follow these guidelines when using logo box.

Do

  • Place in application header for consistent location
  • Show all products user has access to
  • Indicate current product clearly
  • Use standard product logos without modification
  • Provide product descriptions for clarity

Don't

  • Don't modify or customize product logos
  • Don't hide products user has access to
  • Don't use outside of multi-product environments
  • Don't change logo placement between pages

Common Use Cases

Examples of where logo box is essential.

Multi-Tenant Applications

Users with access to multiple Actabl products

Product Navigation

Quick switching between different product modules

Contextual Branding

Show which product context user is currently in

Unified Experience

Consistent navigation across entire product suite

Accessibility

Logo box is designed to be accessible to all users.

Keyboard Navigation

  • Tab - Focus on logo box
  • Enter/Space - Open product switcher menu
  • Arrow Up/Down - Navigate product list
  • Enter - Select product
  • Escape - Close menu

Screen Reader

  • Button role with product switcher label
  • Current product is announced
  • Menu role for product list
  • Product names and descriptions announced
  • Selected state is communicated

Visual Design

  • Clear focus indicator on button
  • Logo has sufficient contrast
  • Current product visually indicated in menu
  • Hover states provide feedback

Resources

Design and development resources for the Logo Box component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →