FeatureHighlight
The FeatureHighlight
supports the onboarding of new users, as well as the
introduction of new features to existing users. It is positioned next to the
specified reference element and has four optional slots: Title
, Visual
,
Content
and Actions
.
Import
import { FeatureHighlight } from '@dynatrace/strato-components-preview/overlays';
Use cases
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 the 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 an 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.