FeatureHighlight
Use the FeatureHighlight to introduce new features to users or guide new users
through key functionality, positioned next to the relevant interface element.
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.