> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pyne.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Highlight

Use the `Highlight` step to **focus** the user's attention on specific product parts while the avatar is speaking.

**Key Characteristics:**

* **Avatar Behaviour:** No action from the user is required. Once the step is executed, the avatar proceeds to the next step.
* **Common Use Cases:** Highlighting different columns in a table, sections of a diagram, or elements of a dashboard when explaining how to interpret or use them.

*Example: Highlighting Table and its Rows in Scoro (styling: Backdrop, Hidden Pointer)*

<video controls width="100%" src="https://base.pyne.ai/storage/v1/object/public/docs//Scoro_Highlight.mp4" title="Highlight Example Video">
  Sorry, your browser doesn't support embedded videos.
</video>

***

### Styling Options

Highlight steps can have different visual designs, depending on the design of your product, storyline and your needs. The design is set up in the ***right side-bar of the step. →***

<img src="https://mintcdn.com/pynegmbh/kQ-U5xvcWyOX7gqR/assets/images/styling-options-sidebar.png?fit=max&auto=format&n=kQ-U5xvcWyOX7gqR&q=85&s=65d503a142ff6d536618f2585434dffc" alt="Styling Options Sidebar" width="774" height="978" data-path="assets/images/styling-options-sidebar.png" />

There are 3 designs for **Highlighting**:

<p>
  <h4>Pulsing Point</h4>

  <img src="https://mintcdn.com/pynegmbh/kQ-U5xvcWyOX7gqR/gifs/pulsing-point.gif?s=d03f304b5538d3834d4becf8143dcd3d" alt="Pulsing Point GIF" width="458" height="286" data-path="gifs/pulsing-point.gif" />

  <br />A subtle pulsing dot appears on the target element to draw focus.
</p>

<p>
  <h4>Pulsing Border</h4>

  <img src="https://mintcdn.com/pynegmbh/kQ-U5xvcWyOX7gqR/gifs/pulsing-border.gif?s=f1862a7951026ce2963459419d5266af" alt="Pulsing Border GIF" width="512" height="320" data-path="gifs/pulsing-border.gif" />

  <br />

  An animated border pulses around the highlighted element.
</p>

<p>
  <h4>Backdrop</h4>

  <img src="https://mintcdn.com/pynegmbh/kQ-U5xvcWyOX7gqR/gifs/hidden-pointer-or-backdrop.gif?s=f4e8d6b544e65ffb34caab2911f41dbd" alt="Backdrop GIF" width="472" height="296" data-path="gifs/hidden-pointer-or-backdrop.gif" />

  <br />

  The area around the target element is darkened, creating a spotlight effect.
</p>