Import
import { LogoModule } from '@backbase/ui-ang/logo';
Usage
Use the bb-logo-ui component to display a logo.
<!-- Basic logo usage -->
<bb-logo-ui></bb-logo-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
isInverse |
boolean |
false |
|
type |
LogoType ('full' | 'emblem') |
'full' |
isInverse
The isInverse input indicates whether to use the inverse colors for the logo.
<!-- Logo with inverse colors -->
<bb-logo-ui [isInverse]="true"></bb-logo-ui>
type
The type input sets the type of logo to display, either the full logo or just the emblem. The component supports two logo types defined by the LogoType:
- 'full': Displays the complete company logo (default)
- 'emblem': Displays only the logo emblem/symbol
<!-- Logo showing only the emblem -->
<bb-logo-ui [type]="'emblem'"></bb-logo-ui>
Responsive behavior
The logo component has different responsive behaviors depending on the type:
- Full logo: Has fixed dimensions by default, but can be made responsive with the bb-logo-responsive CSS class
- Emblem logo: Is responsive by default and scales with its container
CSS Classes
The component generates the following CSS classes based on its inputs:
- .bb-logo: Base logo class
- .bb-logo--emblem: Applied when type="emblem"
- .bb-logo--inverse: Applied when isInverse="true"
Implementation notes
- The component uses CSS background images to display the logos
- Logo files are referenced from the configured image path $path-bb-images)
- Different image files are used for different combinations of type and inverse settings:
- Full logo: logo-light-big.svg (default) / logo-dark-big.svg (inverse)
- Emblem: logo-light-small.svg (default) / logo-dark-small.svg (inverse)
- The emblem type uses aspect ratio-based responsive sizing
- For responsive full logos, add the bb-logo-responsive CSS class manually