sqm-dashboards/app/views/dashboard/_quality_framework_indicators.erb

<div class="school-quality-frameworks card mt-5 p-4 border-radius-8">
  <h2 class="sub-header-2">School Quality Framework Indicators</h2>

  <div class="row mt-5">
    <% category_presenters.each do |category_presenter| %>
      <section class="category-card column d-flex flex-column justify-space-between align-items-center">

        <div class="category-card__icon">
          <i class="fa fa-<%= category_presenter.icon %> fa-2x color-gray-2"></i>
        </div>
        <div class="category-card__title text-center"><h3 class="sub-header-3"><%= category_presenter.name %></h3></div>

        <p class="category-card__description text-center"><%= category_presenter.description %></p>

        <div class="category-card__subcategory">
          <div class="subcategory-card border-radius-8">
            <div class="subcategory-card__benchmark-list">
              <% category_presenter.subcategories.each do |subcategory | %>
                <% presenter = subcategory.subcategory_card_presenter %>
                <div class="subcategory-card__benchmark-item">
                  <div class="subcategory-card__circle <%= presenter.color %>"><%= presenter.abbreviation%></div>
                  <div class="subcategory-card__name"><%= subcategory.name %></div>
                </div>
              <% end %>
            </div>
          </div>
        </div>

        <div class="category-card__button text-center"><button class="view-details mt-3">View Details</button></div>
      </section>
    <% end %>

  </div>
</div>