<div class="dashboard-publisher-result">
    <div class="dashboard-publisher-result__head">
        <div class="dashboard-publisher-result__left-side">
            <a class="dashboard-publisher-result__title">
                AB Charitable Trust
            </a>
        </div>

        <div class="dashboard-publisher-result__right-side">
            <div class="dashboard-publisher-result__date">

                Last update <time datetime="2017-08-22">22 Aug 2017</time>
            </div>
        </div>
    </div>

    <span class="dashboard-publisher-result__badge">
        <span class="icon-badge">
            <div class="icon">

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

            </div>

            Include recipient location codes
        </span>

    </span>

    <hr class="separator-light">

    <h5>Total grants published</h5>
    <div>
        <ul class="years-chart">

            <li class="years-chart__item" style="--opacity: 0.15;">
                <div class="years-chart__block" aria-label="1.5k grants awarded before 2011" title="1.5k grants awarded before 2011"><span>1.5k</span></div>
                <div class="years-chart__label">Older data</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0;">
                <div class="years-chart__block" aria-label="No grants awarded in 2011" title="No grants awarded in 2011"><span></span></div>
                <div class="years-chart__label">2011</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0;">
                <div class="years-chart__block" aria-label="No grants awarded in 2012" title="No grants awarded in 2012"><span></span></div>
                <div class="years-chart__label">2012</div>
            </li>

            <li class="years-chart__item" style="--opacity: 1;">
                <div class="years-chart__block" aria-label="10k+ grants awarded in 2013" title="10k+ grants awarded in 2013"><span>10k+</span></div>
                <div class="years-chart__label">2013</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0.2;">
                <div class="years-chart__block" aria-label="2k grants awarded in 2014" title="2k grants awarded in 2014"><span>2k</span></div>
                <div class="years-chart__label">2014</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0.2;">
                <div class="years-chart__block" aria-label="2k grants awarded in 2015" title="2k grants awarded in 2015"><span>2k</span></div>
                <div class="years-chart__label">2015</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0.2;">
                <div class="years-chart__block" aria-label="2k grants awarded in 2016" title="2k grants awarded in 2016"><span>2k</span></div>
                <div class="years-chart__label">2016</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0.25;">
                <div class="years-chart__block" aria-label="2.5k grants awarded in 2017" title="2.5k grants awarded in 2017"><span>2.5k</span></div>
                <div class="years-chart__label">2017</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0.05;">
                <div class="years-chart__block" aria-label="0.5k grants awarded in 2018" title="0.5k grants awarded in 2018"><span>0.5k</span></div>
                <div class="years-chart__label">2018</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0.05;">
                <div class="years-chart__block" aria-label="0.5k grants awarded in 2019" title="0.5k grants awarded in 2019"><span>0.5k</span></div>
                <div class="years-chart__label">2019</div>
            </li>

            <li class="years-chart__item" style="--opacity: 0.05;">
                <div class="years-chart__block" aria-label="0.5k grants awarded in 2020" title="0.5k grants awarded in 2020"><span>0.5k</span></div>
                <div class="years-chart__label">2020</div>
            </li>

            <li class="years-chart__item" style="--opacity: 1.5;">
                <div class="years-chart__block" aria-label="15k+ grants awarded in 2018" title="15k+ grants awarded in 2018"><span>15k+</span></div>
                <div class="years-chart__label">2021</div>
            </li>

        </ul>

    </div>

    <hr class="separator-light">

    <div>
        <a href="#" class="button">See More</a>
    </div>
</div>
<div class="dashboard-publisher-result">
  <div class="dashboard-publisher-result__head">
    <div class="dashboard-publisher-result__left-side">
      <a class="dashboard-publisher-result__title">
        {{ title }}
      </a>
    </div>

    <div class="dashboard-publisher-result__right-side">
      <div class="dashboard-publisher-result__date">
        {# Using datetime, make sure your timestamp is valid https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values #}
        Last update <time datetime="{{ date_timestamp }}">{{ date }}</time>
      </div>
    </div>
  </div>

  {% for badge in badges %}
    <span class="dashboard-publisher-result__badge">
      {% render '@icon-badge', badge %}
    </span>
  {% endfor %}

  {% render '@separator' %}

  <h5>Total grants published</h5>
  <div>
    {% render '@years-chart' %}
  </div>

  {% render '@separator' %}

  <div>
    <a href="#" class="button">See More</a>
  </div>
</div>
{
  "title": "AB Charitable Trust",
  "date": "22 Aug 2017",
  "date_timestamp": "2017-08-22",
  "badges": [
    {
      "icon_name": "location_on",
      "label": "Include recipient location codes"
    }
  ]
}
  • Content:
    .dashboard-publisher-result {
      border-left: 4px solid $teal;
      box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.06);
      padding: 20px 24px;
      margin-bottom: 20px;
    
      &__head {
        display: flex;
      }
    
      &__left-side {
        flex-grow: 1;
      }
    
      &__title {
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 16px;
        display: block;
      }
    
      &__description {
        font-weight: 400;
        font-size: 16px;
      }
    
      &__date {
        color: $black;
        margin-bottom: 16px;
      }
    }
    
    .dashboard-publisher-result-wrapper {
      .dashboard-publisher-result {
        // Nested card elements in the detail view have headings with their own margins
        padding-top: 1px;
      }
    
      &__external-buttons {
        a:last-child {
          margin-left: 1rem;
        }
      }
    }
    
  • URL: /components/raw/dashboard-publisher-result/dashboard-publisher-result.scss
  • Filesystem Path: src/components/04-modules/dashboard-publisher-result/dashboard-publisher-result.scss
  • Size: 734 Bytes

No notes defined.