Using multiple yields in Ember to display header, body, footer in different places

How to use multiple yields in Ember to display header, body, footer in different places? Added below a sample code for reference. But not working and throws the error saying,

Assertion Failed: A helper named "ib.footer" could not be found

components/common/info-bar-footer.hbs:

components/common/info-bar-header.hbs:

components/common/info-bar.hbs:

<div class="info-bar" style="display: ">
    <div class="info-bar-header">
        <button class="btn-close" data-dismiss="info-bar" >x</button>
        
    </div>
    <div class="info-bar-footer">
        
    </div>
</div>

templates/home.hbs:

    
        <p class="info-content">
            Hello, nice to see you again
        </p>
    
    
        <button class="btn-default">Ok</button>