There are no specific guidelines for this component. Please check the brand logo guidelines for each logo type
By default the logos come with a title that describes the image for assistive technology users. However, when the logo is clickable the logo description should describe the action the user is taking rather than the image.
For example: If clicking on the logo goes to the British Airways homepage then the label should be "British Airways homepage"
Further Reading:
| Element | State | Key | Behaviour |
|---|---|---|---|
<ba-logo> |
Previous element in DOM has focus | Tab |
<a> gets focus |
<a> |
<a> has focus |
Tab |
Next tabbable element in the DOM gets focus |
<a> |
<a> has focus |
Enter |
Browser navigates to url in href attribute |
| Element | State | Action | Behaviour |
|---|---|---|---|
<a> |
- | Click or Tap |
Browser navigates to url in href attribute |
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
height
|
height |
Identifies the height of the logo. If not specified, it defaults to stored value for each logo type. Aspect ratio will not be violated | number | undefined |
undefined |
href
|
href |
Link attribute to be provided if the logo will link to a webpage. Wraps the image in tag | string | undefined |
undefined |
label
|
label |
label attribute to be provided for the link label. This parameter is required if href property is present | string | undefined |
undefined |
name
(required)
|
name |
Identifies the name of brand for which logo will be displayed | "atol" | "avios" | "avios-full" | "avios-negative" | "avios-negative-full" | "british-airways" | "british-airways-negative" | "british-airways-negative-colour" | "oneworld" | "speedmark" | "speedmark-negative" | "speedmark-negative-colour" |
undefined |
width
|
width |
Identifies the width of the logo. If not specified, it defaults to stored value for each logo type. Aspect ratio will not be violated | number | undefined |
undefined |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | None |
Permitted ARIA roles
None
Parent components
ba-logo can be slotted into:
<ba‑flex><ba‑footer><ba‑grid><ba‑header><ba‑header‑global><ba‑hero><ba‑media‑object><ba‑page‑segment>
Usage
Basic usage
<ba-logo name="british-airways"></ba-logo>
Using as a link
<ba-logo name="british-airways" href="https://ba.com" label="British Airways homepage"></ba-logo>
Configuring the size
The width and the height attributes can be set independently without distorting the logo. However, in most instances you will only need to set either the width or the height attributes:
- If the width is set the height is automatically calculated
- If the height is set the width is automatically calculated
If the width and the height are supplied the aspect ratio must match the default aspect ratio otherwise there will be additional whitespace around the logo
<ba-logo name="british-airways" height="100"></ba-logo>