360Giving Design System - Components

Chart Card 

<div class="base-card base-card--yellow">
    <div class="base-card__content">
        <header class="base-card__header">
            <h3 class="base-card__heading">Amount</h3>
            <h4 class="base-card__subheading">(number of grants) Based on 526 grants</h4>
        </header>

        <ul class="bar-chart">

            <li class="bar-chart__item" style="--width: 100%;">
                <div class="bar-chart__label">£2,001 - £5,000</div>
                <div class="bar-chart__bar"><span data-val="25"></span></div>
            </li>

            <li class="bar-chart__item" style="--width: 57%;">
                <div class="bar-chart__label">£2,001 - £5,000</div>
                <div class="bar-chart__bar"><span data-val="77"></span></div>
            </li>

            <li class="bar-chart__item" style="--width: 42%;">
                <div class="bar-chart__label">£2,001 - £5,000</div>
                <div class="bar-chart__bar"><span data-val="63"></span></div>
            </li>

            <li class="bar-chart__item" style="--width: 36%;">
                <div class="bar-chart__label">£2,001 - £5,000</div>
                <div class="bar-chart__bar"><span data-val="42"></span></div>
            </li>

            <li class="bar-chart__item" style="--width: 24%;">
                <div class="bar-chart__label">£2,001 - £5,000</div>
                <div class="bar-chart__bar"><span data-val="27"></span></div>
            </li>

            <li class="bar-chart__item" style="--width: 5%;">
                <div class="bar-chart__label">£2,001 - £5,000</div>
                <div class="bar-chart__bar"><span data-val="4"></span></div>
            </li>

        </ul>
    </div>
</div>
 
<div class="base-card base-card--yellow">
  <div class="base-card__content">
    <header class="base-card__header">
      <h3 class="base-card__heading">{{card_heading}}</h3>
      <h4 class="base-card__subheading">{{card_subheading}}</h4>
    </header>
    {{ barchart }}

    <ul class="bar-chart">
      {% for i in chart %}
      <li class="bar-chart__item" style="--width: {{ i.width }};">
        <div class="bar-chart__label">£2,001 - £5,000</div>
        <div class="bar-chart__bar"><span data-val="{{ i.value }}"></span></div>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
 
{
  "card_heading": "Amount",
  "card_subheading": "(number of grants) Based on 526 grants",
  "chart": [
    {
      "value": 25,
      "width": "100%",
      "label": "Up to £500"
    },
    {
      "value": 77,
      "width": "57%",
      "label": "£501 - £1,000"
    },
    {
      "value": 63,
      "width": "42%",
      "label": "£1,001 - £2,000"
    },
    {
      "value": 42,
      "width": "36%",
      "label": "£2,001 - £5,000"
    },
    {
      "value": 27,
      "width": "24%",
      "label": "£5,001 - £10,000"
    },
    {
      "value": 4,
      "width": "5%",
      "label": "£10,001 - £100k"
    }
  ]
}

No notes defined.