<div class="workflow-select-plugin">
    <div>
        <h2 class="workflow-select-card-container-title">Create New...</h2>
    </div>
    <div class="workflow-select-card-container">
        <!-- ko foreach: {data: workflows, as: 'workflow'} -->
        <a data-bind="attr: {href: workflow.url, title: workflow.name}" href="#"><div data-bind="style: {'background-color': workflow.bgColor}" class="workflow-select-card">
            <h4 class="workflow-select-title" data-bind="text: workflow.name"></h4>
            <div data-bind="style: {'background-color': workflow.circleColor}" class="workflow-select-wf-circle">
                <span><i data-bind="attr:{class: ('fa '+workflow.icon +' workflow-select-wf-icon')}"></i></span>
            </div>
            <p data-bind="text: workflow.desc" class="workflow-select-desc"></p>
        </div></a>
        <!-- /ko -->
    </div>
</div>
