<template name="rolesSettings">
  <section class="content-header">
    <h1><i class="fa fa-user-md"></i> Roles</h1>
  </section>
  <section class="content">
    <button id="add-role" class="btn btn-primary">
        Add Role
    </button>
    <ul class="list-group">
      {{# each roles }}
      <li class="list-group-item">{{ name }}</li>
      {{/ each }}
    </ul>
  </section>
</template>

<template name="rolesSettings">
  <section class="content-header">
    <h1><i class="fa fa-user-md"></i> Roles</h1>
  </section>
  <section class="content">
    <div class="box">
      <div class="box-header">
        <div class="box-toolbar">
          <div class="pull-right">
            <button id="add-role" class="btn btn-primary">
                Add Role
            </button>
          </div>
        </div>
      </div>
      <div class="box-body no-padding">
        <table class="table table-striped">
          <tbody>
          {{# each roles }}
          <tr>
            <td>{{ name }}</td>
          </tr>
          {{/ each }}
          </tbody>
        </table>
      </div>
    </div>
  </section>
</template>

Add box and striped table
Add box and striped table
