How can I use Spacebars to use different CSS elements?

I’d like to use a different color for the header of my card. I thought that I could use Spacebars unique {{if condition for it but it seems it only works with boolean variables and not with a condition that is checking for a string:

Here’s my code:

{{#if type='ToDo'}}
    <div class="paper-card-header teal-header">
        {{#if type='Info'}}
            <div class="paper-card-header orange-header">
            <div class="paper-card-header pink-header">

I’d like to use the CSS element of teal-header for the condition that type==='ToDo', orange-header for the condition that type==='Info' andpink-headerfor every other value oftype`.

How can I achieve this or is it not possible to do within Meteor?

You can also answer this question at SO:

You’re going at it the wrong way. Instead of a helper that returns the type, have one that returns the style itself. <div class="paper-card-header {{ paperCardStyle }} ">

1 Like

for simple cases you can do things like this

<div class="{{#if done}}done{{else}}notdone{{/if}}">

but yes, for more flexibility do what @manuel is suggesting

In Attribute Values
A double-braced tag may be part of, or all of, an HTML attribute value:

<input type="checkbox" class="checky {{moreClasses}}" checked={{isChecked}}>

spacebars ref