---
name: Spotlight
menu: Patterns
parent: Modules
route: /patterns/spotlight
---

# Spotlight

Spotlight is a centered, one column container with a large image or text. It provides curved surfaces (at the top and bottom) and places its content in the centre.

## Examples

```specimen-react
responsive: true
---
<Spotlight
  backgroundColor="#F2F2F2"
  curvedTop={true}
  curvedBottom={true}
  textColor="#003366"
>
  <h1>Heading</h1>
</Spotlight>
```

**When used inside the `Panel`**

```specimen-react
responsive: true
---
<PageContainer width="standard">
  <Panel>
    <Spotlight
      backgroundColor="#F2F2F2"
      curvedTop={true}
      curvedBottom={true}
      textColor="#003366"
    >
      <h1>Heading</h1>
    </Spotlight>
  </Panel>
</PageContainer>
```

## Configuration

**`backgroundColor: string`**

Set the background color. Defaults to `light grey`.

```specimen-react
<PageContainer width="standard">
  <Panel>
    <Spotlight
      backgroundColor="#003366"
      curvedTop={true}
      curvedBottom={true}
      textColor="#F2F2F2"
    >
      <h1>Heading</h1>
    </Spotlight>
  </Panel>
</PageContainer>
```

**`textColor: string`**

Set the text color of the content. Defaults to `blue` if the background is `light grey` otherwise `white` if the background is `blue`

```specimen-react
<PageContainer width="standard">
  <Panel>
    <Spotlight
      backgroundColor="#003366"
      curvedTop={true}
      curvedBottom={true}
      textColor="#E4228E"
    >
      <h1>Heading</h1>
    </Spotlight>
  </Panel>
</PageContainer>
```

**curvedTop: boolean**

Toggle the top curve. Defaults to `false`

```specimen-react
<PageContainer width="standard">
  <Panel>
    <Spotlight
      backgroundColor="#003366"
      curvedTop={true}
      textColor="#F2F2F2"
    >
      <h1>Heading</h1>
    </Spotlight>
  </Panel>
</PageContainer>
```

**curvedBottom: boolean**

Toggle the bottom curve. Defaults to `false`

```specimen-react
<PageContainer width="standard">
  <Panel>
    <Spotlight
      backgroundColor="#003366"
      curvedBottom={true}
      textColor="#F2F2F2"
    >
      <h1>Heading</h1>
    </Spotlight>
  </Panel>
</PageContainer>
```
