<b-card> add class only for header or footer

I have add class bg-info only for header or footer. I need create this block

<div class="card">
    <div class="card-header bg-info text-white">text</div>
     hello world
</div>

I tired

<b-card show-header>
   <div class="bg-info" slot="header" variant="info">test</div>
   hello world
 </b-card>

But this code transform in

<div class="card">
     <div class="card-header">
          <div class="bg-info text-white">text</div> 
    </div>
    hello world
</div>

How to do it?

[alexsasharegan]

@losblancos113, I think you might want to consider making the headerClass prop accept a string or an array. Then you won’t need to set every object value to true or deal with any value sanitation (the regex replace and trim shouldn’t be necessary).

Also, I think we should extend this to the footer. Maybe you can even leave the class="card-header", but just add the plain :class="headerClass" since Vue can handle interpolating all the string, object, or array values to classes.

[tmorehouse]

This features should be available in the next release.