360Giving Design System - Components

Dashboard Publisher Result: Many Badges 

<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>

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

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

            </div>

            Include grant location name
        </span>

    </span>

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

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

            </div>

            Include grant location codes
        </span>

    </span>

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

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

            </div>

            Include charity or company nos.
        </span>

    </span>

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

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

            </div>

            Include external org IDs
        </span>

    </span>

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

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

            </div>

            Include grant duration
        </span>

    </span>

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

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

            </div>

            Include programme names
        </span>

    </span>

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

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

            </div>

            Include classifications
        </span>

    </span>

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

                <span class="icon__overlaid-text">xlsx</span>

            </div>

            Publish using spreadsheets
        </span>

    </span>

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

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

            </div>

            Include metadata
        </span>

    </span>

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

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

            </div>

            Published data in the last year
        </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"
    },
    {
      "icon_name": "edit_location",
      "label": "Include grant location name"
    },
    {
      "icon_name": "add_location",
      "label": "Include grant location codes"
    },
    {
      "icon_name": "money",
      "label": "Include charity or company nos."
    },
    {
      "icon_name": "confirmation_number",
      "label": "Include external org IDs"
    },
    {
      "icon_name": "event_note",
      "label": "Include grant duration"
    },
    {
      "icon_name": "format_quote",
      "label": "Include programme names"
    },
    {
      "icon_name": "label",
      "label": "Include classifications"
    },
    {
      "overlaid_text": "xlsx",
      "label": "Publish using spreadsheets"
    },
    {
      "icon_name": "reorder",
      "label": "Include metadata"
    },
    {
      "icon_name": "event_available",
      "label": "Published data in the last year"
    }
  ]
}
  • 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.