---
title: "Highlight — React"
canonical: https://sky-ui.cf.sky.com/components/highlight/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Highlight — React

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

```js
import { Highlight } from '@sky-uk/ui-core';
```

---

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

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

---

## Props

### $placement

`$placement` can be set to `right` or `center`.

```tsx
<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:

- [position](/core/system/position/)