ag-sections.html

<div class="container ag-sections">
  <div class="row">
    <div class="col-xs-4 ag-sections__section--red">
      <h1 class="ag-sections__section__heading">SECTION A</h1>
      <div class="ag-sections__section__body">This section is Section A.</div>
      <div class="ag-sections__section__footer">Section A is red.</div>
    </div>
    <div class="col-xs-4 ag-sections__section--yellow">
      <h1 class="ag-sections__section__heading">SECTION B</h1>
      <div class="ag-sections__section__body">This section is Section B.</div>
      <div class="ag-sections__section__footer">Section B is yellow.</div>
    </div>
    <div class="col-xs-4 ag-sections__section--green">
      <h1 class="ag-sections__section__heading">SECTION C</h1>
      <div class="ag-sections__section__body">This section is Section C.</div>
      <div class="ag-sections__section__footer">Section C is green. Green is for Go!</div>
    </div>
  </div>
</div>