> For the complete documentation index, see [llms.txt](https://docs.polarity.io/integrations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.polarity.io/integrations/build-an-integration/customizing-the-overlay-window/templates/conditionals.md).

# Conditionals

conditionally show information in templates using if, unless, and else helpers.

## Summary

Handlebar templates include `if` `else` and `unless` conditional helpers.  These helpers can be invoked as block or inline helpers.

## Block Usage

Conditional statements can be invoked in block format to show blocks of HTML if the conditional statement evaluates to true.  In the example below, the `severity` property will only be displayed if it is present.

```markup
{{#if block.data.details.severity}}
   <span>Severity: {{block.data.details.severity}}</span>
{{/if}}
```

The `{{if}}` helper tests for truthiness.  This means that the condition will be true except when it is `false`, `undefined`, `0`, `[]`, or `null`.

The inverse of the `if` helper is the `unless` helper.

```markup
{{#unless block.data.details.severity}}
   <span>No Severity Level Found</span>
{{/unless}}
```

Both the `if` helper and `unless` helper can use the `else` helper.

```
{{#if block.data.details.severity}}
    <span>Severity: {{block.data.details.severity}}
{{else}}
    <span>No Severity Level Found</span>
{{/if}}
```

## Inline Usage

Conditional helpers can also be used `inline`.  When using the helper inline, no `#` sign is needed.

```markup
<div>
    {{if block.data.details.isActive "Active" "Not Active"}}
</div>
```

In the example above, the `<div>` will display the string `Active` if the boolean value `isActive` is `true`.  Otherwise, if `isActive` is `false` the string `Not Active` will be displayed.

Inline conditional helpers can be used to conditionally add CSS classes to your template.

```
<span class={{if block.data.details.isActive "green" "red"}}></span>
```

Oftentimes you will combine this inline conditional usage with [truth helpers](/integrations/build-an-integration/customizing-the-overlay-window/templates/built-in-helpers.md#truth-helpers).

{% tabs %}
{% tab title="template.hbs" %}

```
<span class={{if (gt block.data.details.severity 50) "red" "green"}}>
    {{block.data.details.severity}}
</span>
```

{% endtab %}

{% tab title="style.less" %}

```cpp
.red {
    color: #ff0000;
}

.green {
    color: #00ff00;
}
```

{% endtab %}
{% endtabs %}

In the example above, the severity level will be displayed using the `red` CSS class if the severity value is greater than 50, otherwise the severity level will be displayed using the `green` CSS class.  These CSS classes might set the `color` attribute on the text.

{% hint style="info" %}
For more detailed information on conditional helpers please see the Ember handlebars guide located here <https://guides.emberjs.com/v3.4.0/templates/conditionals/>
{% endhint %}