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

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

  <div class="row">
    <% category_presenters.each do |category_presenter| %>
      <section class="category-card column d-flex flex-column">
        <div class="category-card__title text-center"><h3><%= category_presenter.name %></h3></div>
        <p class="category-card__description text-center"><%= category_presenter.description %></p>
        <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 row">
                <div class="subcategory-card__circle-container">
                  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:50px; height:50px;">
                    <circle class="subcategory-card__benchmark-icon <%= presenter.color %>" cx="50" cy="50" r="35"/>
                    <text class="subcategory-card__benchmark-label" x="<%= presenter.offset %>" y= "55"><%= presenter.abbreviation %></text>
                  </svg>
                </div>
                  <div class="subcategory-card__name col"><%= subcategory.name %></div>
                </div>
            <% end %>
          </div>
        </div>
        <div class="text-center"><button class="view-details mt-3">View Details</button></div>
      </section>
    <% end %>

  </div>
</div>