# KJB Settings ID's

KJB Settings show to the end user in the form of a blue outline when they hover an element that then takes them to that elements settings.

```markup
<div class="hero">
  <div class="container">
    <h1 kjb-settings-id="{{ 'heading' | settings_id: section: section }}">{{ section.settings.heading }}</h1>
  </div>
</div>
```

KJB tags can be applied to both section settings and block settings

```ruby
{{ 'heading' | settings_id: section: section }}
{{ 'image' | settings_id: section: section, block: block }}
```