FeatureHighlight

Use the FeatureHighlight to introduce new features to users or guide new users through key functionality, positioned next to the relevant interface element.

OverviewPropertiesUsageChangelog

Import

import { FeatureHighlight } from '@dynatrace/strato-components/content';

Demo

There is no designated trigger for the FeatureHighlight. It can be triggered using a button, but as the state is entirely controlled by you, it is also possible to open it e.g. on page load. A small pointer connects the FeatureHighlight to the element it is referring to. To handle the component's state, provide a value for the open prop along with an onClose callback.

Add a visual

Use the Visual slot to add an image or a video. The recommended asset size is 400 x 250px (8:5 aspect ratio). If the provided visual has a different aspect ratio, it is scaled proportionally to fit the container.

Add content

The Content slot can be used to provide detailed information, for example text or a link to an external source. If the FeatureHighlight exceeds the screen height, the content becomes scrollable.

Add actions

The Actions slot should be used to add, for example, links to further information or buttons to perform additonal operations.

Change placement

Use the placement property to define the component's position.

Possible placement options:

• right-bottom (default)
• right-middle
• right-top
• left-bottom
• left-middle
• left-top
• top-left
• top-middle
• top-right
• bottom-left
• bottom-middle
• bottom-right

Add aria-label

By default, the FeatureHighlight is already correctly labeled with aria-labelledby pointing to the title and aria-describedby pointing to the provided content. Only if both title and content are not defined, an appropriate aria-label should be set.