<div class="dashboard-stats-card">
    <div class="dashboard-stats-card__head">
        <div class="dashboard-stats-card__left-side">
            <h3 class="dashboard-stats-card__title">Location data</h3>
            <p class="dashboard-stats-card__description">Grants with location data can be used to map grants, and help people understand where the money goes.
            </p>
        </div>

        <div class="dashboard-stats-card__right-side">
            <a class="alert-tag alert-tag--anchor" href="#">
                <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
                    </svg>
                </span>
                <span class="alert-tag__content">Learn more about location data</span>
            </a>

        </div>
    </div>

    <div class="dashboard-stats-card__groups">

        <div class="dashboard-stats-card__group">
            <span>
                <div class="icon">

                    <i class="material-icons icon__mat-icon">person_pin_circle</i>

                </div>
            </span>
            <span id="stat-0">Include recipient locations</span>
            <span aria-labelledby="stat-0" class="dashboard-stats-card__value">64%</span>
        </div>

        <div class="dashboard-stats-card__group">
            <span>
                <div class="icon">

                    <i class="material-icons icon__mat-icon">edit_location</i>

                </div>
            </span>
            <span id="stat-1">Include grant location names</span>
            <span aria-labelledby="stat-1" class="dashboard-stats-card__value">37%</span>
        </div>

        <div class="dashboard-stats-card__group">
            <span>
                <div class="icon">

                    <i class="material-icons icon__mat-icon">add_location</i>

                </div>
            </span>
            <span id="stat-2">Include grant location codes</span>
            <span aria-labelledby="stat-2" class="dashboard-stats-card__value">64%</span>
        </div>

    </div>

    <div class="spacer-2"></div>

    <hr class="separator-light">

    <div class="graph-container">
        <img src="assets/images/dashboard-samples/overview-graph-publishers-with-ids.png" alt="Publishers with IDs">
    </div>

</div>
<div class="dashboard-stats-card">
  <div class="dashboard-stats-card__head">
    <div class="dashboard-stats-card__left-side">
      <h3 class="dashboard-stats-card__title">{{ title }}</h3>
      <p class="dashboard-stats-card__description">{{ description }}</p>
    </div>

    <div class="dashboard-stats-card__right-side">
      {% render '@alert-tag--general', { label: info_label } %}
    </div>
  </div>

  <div class="dashboard-stats-card__groups">
    {% for ii in range(stats.length) %}
      <div class="dashboard-stats-card__group">
        <span>{% render '@icon', { icon_name: stats[ii].icon_name } %}</span>
        <span id="stat-{{ ii }}">{{ stats[ii].label }}</span>
        <span aria-labelledby="stat-{{ ii }}" class="dashboard-stats-card__value">{{ stats[ii].value }}</span>
      </div>
    {% endfor %}
  </div>

  <div class="spacer-2"></div>

  {% if graph_description %}
    {% render '@separator' %}

    {# Consider using this or equivalent when the graph doesn't have an embedded title? #}
    {# <div class="graph-label">{{ graph_description }}</div> #}
    <div class="graph-container">
      <img src="assets/images/dashboard-samples/overview-graph-publishers-with-ids.png" alt="Publishers with IDs">
    </div>
  {% endif %}
</div>
{
  "title": "Location data",
  "description": "Grants with location data can be used to map grants, and help people understand where the money goes.\n",
  "info_label": "Learn more about location data",
  "stats": [
    {
      "icon_name": "person_pin_circle",
      "label": "Include recipient locations",
      "value": "64%"
    },
    {
      "icon_name": "edit_location",
      "label": "Include grant location names",
      "value": "37%"
    },
    {
      "icon_name": "add_location",
      "label": "Include grant location codes",
      "value": "64%"
    }
  ],
  "graph_description": "Count of publishers for each 10% band, % of recipients with external identifier"
}
  • Content:
    .dashboard-stats-card {
      border-left: 4px solid $teal;
    
      &--grant {
        border-left-color: $orange;
      }
    
      box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.06);
      padding: 20px 24px;
      margin-bottom: 20px;
    
      &__head {
        display: flex;
      }
    
      &__right-side {
        min-width: 40%;
        @include breakpoint($medium) {
          min-width: 25%;
        }
      }
    
      &__title {
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 16px;
        display: block;
      }
    
      &__description {
        font-weight: 400;
        font-size: 16px;
      }
    
      &__groups {
        display: flex;
        flex-direction: column;
    
        @include breakpoint($medium) {
          flex-direction: row;
        }
      }
    
      &__group {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 2rem 0;
        border-bottom: solid 1px $blue-tint-dark;
    
        @include breakpoint($medium) {
          max-width: 20%;
          padding: 0 2rem;
          border-bottom-width: 0;
          border-right: solid 1px $blue-tint-dark;
        }
    
        &:last-child {
          border-width: 0;
        }
      }
    
      &__value {
        font-size: 1.2rem;
        font-weight: 700;
      }
    }
    
  • URL: /components/raw/dashboard-stats-card/dashboard-stats-card.scss
  • Filesystem Path: src/components/04-modules/dashboard-stats-card/dashboard-stats-card.scss
  • Size: 1.1 KB

No notes defined.