@actabldesign/bellhop-assets

Shared assets library for the Bellhop design system, including avatars, illustrations, images, and logos.

Installation

npm install @actabldesign/bellhop-assets

Usage

ESM / CDN (Recommended)

The easiest way to use Bellhop assets is via ESM CDN links. No build step required:

<!-- Avatar -->
<img
  src="https://esm.sh/@actabldesign/bellhop-assets/src/avatars/avatar-1.svg"
  alt="User avatar"
/>

<!-- Illustration -->
<img
  src="https://esm.sh/@actabldesign/bellhop-assets/src/illustrations/empty-state.svg"
  alt="Empty state"
/>

<!-- Logo -->
<img
  src="https://esm.sh/@actabldesign/bellhop-assets/src/logos/actabl-logo.svg"
  alt="Actabl logo"
/>

Alternative CDN options:

<!-- unpkg -->
<img
  src="https://unpkg.com/@actabldesign/bellhop-assets/src/avatars/avatar-1.svg"
  alt="Avatar"
/>

<!-- jsdelivr -->
<img
  src="https://cdn.jsdelivr.net/npm/@actabldesign/bellhop-assets/src/avatars/avatar-1.svg"
  alt="Avatar"
/>

Direct Path Imports

Import assets using direct paths from the src/ directory:

// Avatars
import avatar1 from '@actabldesign/bellhop-assets/src/avatars/avatar-1.svg';

// Illustrations
import welcomeIllustration from '@actabldesign/bellhop-assets/src/illustrations/welcome.svg';

// Logos
import actablLogo from '@actabldesign/bellhop-assets/src/logos/actabl-logo.svg';

// Images
import heroImage from '@actabldesign/bellhop-assets/src/images/hero.png';

Using in Components

import avatar from '@actabldesign/bellhop-assets/src/avatars/avatar-1.svg';

function UserProfile() {
  return <img src={avatar} alt="User avatar" />;
}

Available Assets

Avatars (src/avatars/)

User avatar illustrations and placeholders:

• Various avatar styles and variations
• SVG format for optimal scaling
• Consistent design language

Illustrations (src/illustrations/)

Decorative illustrations for empty states, onboarding, and feature highlights:

• Empty state illustrations
• Onboarding graphics
• Feature highlight visuals
• All in SVG format

Logos (src/logos/)

Bellhop and Actabl brand logos:

• Full color logos
• Monochrome versions
• Icon-only variants
• Light and dark theme versions

Images (src/images/)

General purpose images and graphics:

• Hero images
• Background graphics
• General purpose imagery

Framework Integration

React

import { BhAvatar } from '@actabldesign/bellhop-react';
import avatar from '@actabldesign/bellhop-assets/src/avatars/avatar-1.svg';

function Profile() {
  return (
    <div className="profile">
      <img src={avatar} alt="User avatar" />
      <BhAvatar name="John Doe" size="lg" />
    </div>
  );
}

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  template: `
    <div class="profile">
      <img [src]="avatarSrc" alt="User avatar" />
    </div>
  `,
})
export class UserProfileComponent {
  avatarSrc =
    'node_modules/@actabldesign/bellhop-assets/src/avatars/avatar-1.svg';
}

Asset Guidelines

File Formats

• SVG: Vector graphics (avatars, illustrations, logos)
• PNG: Raster images with transparency
• JPG: Photographic images

Naming Convention

Assets follow a consistent naming pattern:

• Lowercase with hyphens: avatar-1.svg
• Descriptive names: welcome-illustration.svg
• Theme indicators when applicable: logo-dark.svg, logo-light.svg

Optimization

All assets are optimized for web use:

• SVGs are minified and cleaned
• Images are compressed
• Appropriate formats chosen for each use case

Accessibility

Always include descriptive alt text:

<img src={avatar} alt="User profile avatar showing a professional headshot" />

Development

Adding New Assets

1. Place assets in the appropriate directory (avatars/, illustrations/, logos/, or images/)
2. Follow the naming convention
3. Optimize assets before committing (SVGO for SVGs)
4. Update the src/index.js export if needed

Building

npm run build:lib:assets

Related Packages

• @actabldesign/bellhop-core - Web Components (StencilJS)
• @actabldesign/bellhop-react - React component library
• @actabldesign/bellhop-angular - Angular component library
• @actabldesign/bellhop-styles - CSS styles and design tokens

License

MIT