# Spotlight with preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

<CH.Spotlight preset="https://codesandbox.io/s/zzgrb" start={1}>

```jsx app.js
import Circle from "./circle";
const red = "hsl(0 85% 60%)";
export default function App() {
  return (
    <div>
      <Circle color={red} />
    </div>
  );
}
```

---

## Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```jsx app.js

```

---

## Ipsum

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.

```jsx app.js focus=5:9
import Circle from "./circle";
const red = "hsl(0 85% 60%)";
export default function App() {
  return (
    <div>
      <Circle color={red} />
      <Circle color={red} />
      <Circle color={red} />
    </div>
  );
}
```

---

## Dolor sit

Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.

```jsx app.js focus=2,6:8
import Circle from "./circle";
const red = "hsl(0 85% 60%)";
export default function App() {
  return (
    <div>
      <Circle color={red} />
      <Circle color={red} />
      <Circle color={red} />
    </div>
  );
}
```

---

## Amet

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.

```jsx app.js focus=8:10
import Circle from "./circle";
const red = "hsl(0 85% 60%)";
const blue = "hsl(240 50% 60%)";
const gold = "hsl(60 60% 60%)";
export default function App() {
  return (
    <div>
      <Circle color={red} />
      <Circle color={blue} />
      <Circle color={gold} />
    </div>
  );
}
```

</CH.Spotlight>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.