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

# Signpost — React

Signposts direct and link users to another page.

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

## Examples

### Minimal

```tsx
<Signpost
  $maxWidth="300px"
  heading="Heading text"
  href="#"
  media={{
    alt: 'Alt text',
    src: 'https://placehold.co/400x400'
  }}
/>
```

### Aspect Ratio

```tsx
<Signpost
  $maxWidth="300px"
  heading="Heading text"
  href="#"
  media={{
    $aspectRatio: '4/3',
    alt: 'Alt text',
    src: 'https://placehold.co/400x300'
  }}
/>
```

---

## Props

- [Card](/components/card/react/) props
- heading: `string`
- href: `string`
- media: `object`
  - [Image](/components/image/) props

## System Modifiers

The `Signpost` component also supports the props applied using the following system modifiers:

- [display](/core/system/display)
- [flex-child](/core/system/flex-child)
- [grid-child](/core/system/grid-child)
- [height](/core/system/height)
- [margin](/core/system/margin)
- [padding](/core/system/padding)
- [width](/core/system/width)