ba-link-tile
A minimal related-content tile with an image, link label and trailing arrow. Use in rows or grids to surface related or cross-sell content, such as onward destinations or “you might also like” links. The whole tile acts as a single link
Airframe
Web Components
React
React Native
Anatomy
Image
An image that visually represents the content of the tile
Paragraph (optional)
A paragraph that provides additional context or information about the link
Link
A link that navigates to the related content
Design Documentation
Image choices should always be related to the tile content, e.g. photos of relevant destinations etc.
Avoid using images that are too busy or distracting, as this can take attention away from the tile's main message.
Live Demo
This is a link tile
<ba-link-tile
alt="Description of image"
src="ba-link-tile-live-demo.jpg"
text="Example link"
href="https://www.britishairways.com"
>
<p>This is a link tile</p>
</ba-link-tile>Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
alt(required) |
alt |
The 'alt' attribute defines the alternative text for our image.This will be used to help our visually impaired users using screen readers. Also the text can be displayed when an image fails to load |
string |
undefined |
aspectRatio |
aspect-ratio |
Defines a set aspect ratio for our image, sets a proportional relationship between the image's width and height. |
"1-1" | "16-9" | "3-4" | "4-3" | "9-16" | "credit-card" | undefined |
'16-9' |
href(required) |
href |
The URL to navigate to when the link tile is clicked | string |
undefined |
sizes |
sizes |
This defines the image size values | string | undefined |
undefined |
src(required) |
src |
The image URL. This attribute is mandatory for the <img> element. |
string |
undefined |
srcSet |
srcset |
This defines the image srcset values | string | undefined |
undefined |
text(required) |
text |
The text to display inside the link tile | string |
undefined |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <p> |
Parent components
ba-link-tile can be slotted into:
Events
| Event | Description | Type |
|---|---|---|
baClick |
Emitted when the internal link is clicked. For use with single-page app (SPA) routing so that link clicks can be handled to avoid a full page load. | CustomEvent<MouseEvent> |
Usage
Basic usage
In most scenarios you will only need to populate the src, alt, text and href attributes
<ba-link-tile
alt="Description of image"
src="image.webp"
text="Example link"
href="https://www.britishairways.com"
>
</ba-link-tile>Using srcSet
Srcset can be used to supply different image file sizes for different screen sizes. The browser will automatically decide which image to download depending on the device size and pixel density
<ba-link-tile
alt="Description of image"
srcset="image-at-1024x768.png 1024w, image-at-600x450.png 600w, image-at-480x360.png 480w"
text="Example link"
href="https://www.britishairways.com"
>
</ba-link-tile>Adding an extra paragraph
An extra paragraph can be added to the link tile. The link will be described by the paragraph and the link text will not be read out by screen readers.
<ba-link-tile
alt="Description of image"
srcset="image-at-1024x768.png 1024w, image-at-600x450.png 600w, image-at-480x360.png 480w"
text="Example link"
href="https://www.britishairways.com"
>
<p>This is an extra paragraph that describes the link</p>
</ba-link-tile>Guidelines
Link text should clearly describe the destination or action, allowing users to understand the purpose without needing additional context.
Good examples of descriptive link text include:
- "Flights to New York"
- "Book a hotel in Paris"
Bad examples of link text that relies on surrounding context include:
- "Click here"
- "Read more"
- "Learn more"
Further reading:
People with cognitive disabilities or those with partial sight may have trouble reading text with the authored font family, size and colour. People with low-vision may zoom in a lot, and text within bitmap images gets very pixelated & blurry.
In order to read content comfortably, they may change the visual presentation of the content using their own style sheets.
Text should always be used to present information rather than an image as the presentation of content in an image can not be changed easily, if required.
If you're provided with an image asset which could be implemented in HTML, recommend this over using the visual asset. Often custom typefaces and visual styling via CSS can achieve desired effect. If this is not possible and text is included in image, try to include the text in HTML elsewhere on the page.
Keyboard navigation
State: Previous element in DOM has focus
Link in shadow DOM gets focus
State: Link in shadow DOM has focus
Activates the link
Next tabbable element in the DOM gets focus
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-link-tile is only used for navigation and not for button-like actions such as submitting forms, launching modals, or opening menus
- Link text is clear, descriptive, and communicates the destination
Accessibility checklist
- ba-link-tile has discernible text
- ba-link-tile has not been disabled
- Browser URL is updated when navigating using ba-link-tile
- Focus indicator has not been obscured on all sides of the component
- ba-link-tile is not nested inside other interactive elements (e.g., buttons, other links, or form controls)
- alt text has been provided for the image
- the image does not contain text
These checks are handled by the component and do not need to be repeated each time it is used.
- Clicking anywhere on the tile activates the link
- If the paragraph is used the link will be described by the paragraph
- ba-link-tile is operable using assistive technology
- Has a visible focus indicator on all sides of the link
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments