Skip to main navigationSkip to main content
Return to Sky UI homepage
import { Highlight } from '@sky-uk/ui-core';

Highlight is a callout used to draw attention to a particular detail.

<Card $height="100px" $maxWidth="400px">
    <Highlight>Message</Highlight>
</Card>

Props

$placement

$placement can be set to right or center.

<Card $height="100px" $maxWidth="400px">
    <Highlight $placement="center">Message</Highlight>
</Card>

System Modifiers

The Highlight component supports the props applied using the following system modifiers:

Highlight - React | Sky UI Design System