<div class="grant-info-highlight grid grid--three-columns">
    <div class="grant-info-highlight__funder">
        <div class="grant-info-highlight__label">Funding Organization</div>

        <div>
            <a href="#">Sport England (GB-COH-RC000766)</a>
        </div>
    </div>

    <div class="grant-info-highlight__data">
        <div class="grant-info-highlight__data--amount">£9,000</div>

        <div class="grant-info-highlight__data--infographic">
            <svg class="infographic-arrow" width="197" height="36" viewBox="0 0 197 36" fill="#DE6E26" xmlns="http://www.w3.org/2000/svg">
                <path class="infographic-arrow__group-one-circles" d="M59.1815 19.2156C59.293 22.5436 56.7285 25.1548 53.4 25.2673C50.0715 25.3798 47.4604 22.8166 47.3489 19.4886C47.2373 16.1607 49.8018 13.5494 53.1304 13.4369C55.3167 13.3054 57.412 14.5834 58.3913 16.2795C58.9789 17.2972 59.1291 18.3412 59.1815 19.2156ZM35.6859 19.6637C35.7974 22.9917 33.233 25.6031 29.9045 25.7156C26.5759 25.8281 23.9648 23.2647 23.8532 19.9367C23.7417 16.6088 26.3062 13.9975 29.6347 13.885C31.919 13.9231 33.7467 15.1294 34.7259 16.8256C35.3135 17.8433 35.6335 18.7893 35.6859 19.6637ZM12.0207 20.21C12.1322 23.5379 9.56764 26.1492 6.23911 26.2617C2.91057 26.3742 0.299606 23.8109 0.188074 20.483C0.0765428 17.155 2.64092 14.5436 5.96945 14.4311C8.15583 14.2995 10.2511 15.5777 11.2304 17.2739C11.818 18.2916 12.138 19.2376 12.0207 20.21Z" />
                <path class="infographic-arrow__group-two-circles" d="M85.0055 16.8917C85.2014 17.231 85.3972 17.5701 85.4234 18.0073C85.6193 18.3466 85.6455 18.7839 85.6717 19.2211C85.6979 19.6583 85.7241 20.0955 85.6523 20.3631C85.6785 20.8003 85.6067 21.0679 85.4632 21.603C85.0327 23.2085 84.1388 24.4029 82.7814 25.1866C82.442 25.3825 82.1027 25.5784 81.6654 25.6047C81.3261 25.8006 80.8888 25.8271 80.4515 25.8534C80.0143 25.8797 79.5769 25.9059 79.3093 25.8343C78.8721 25.8606 78.6044 25.7889 78.0692 25.6456C77.8016 25.5739 77.2665 25.4306 76.9009 25.1893C76.5354 24.948 76.2677 24.8764 75.9022 24.6352C75.5367 24.3939 75.3409 24.0547 74.9754 23.8134C74.414 23.2329 74.0224 22.5545 73.8003 21.7781C73.6045 21.4389 73.5782 21.0018 73.5521 20.5646C73.5259 20.1274 73.4998 19.6901 73.5715 19.4226C73.5453 18.9854 73.617 18.7178 73.7605 18.1827C73.8323 17.9151 73.9757 17.3799 74.2172 17.0144C74.4586 16.6488 74.5303 16.3812 74.7717 16.0156C75.0131 15.6501 75.3526 15.4542 75.594 15.0887C75.9334 14.8928 76.1748 14.5273 76.5141 14.3314C76.8535 14.1354 77.1927 13.9395 77.63 13.9132C77.9694 13.7173 78.4067 13.6908 78.8439 13.6645C79.2812 13.6382 79.7185 13.612 79.9861 13.6837C80.4234 13.6573 80.691 13.729 81.2262 13.8723C81.4938 13.944 82.029 14.0873 82.3945 14.3286C82.76 14.5699 83.0277 14.6415 83.3933 14.8828C83.7588 15.124 83.9545 15.4633 84.3201 15.7045C84.6138 16.2134 84.8096 16.5525 85.0055 16.8917Z" />
                <path class="infographic-arrow__group-three-circles" d="M156.354 18.2155C156.466 21.5434 153.901 24.1547 150.573 24.2672C147.244 24.3797 144.633 21.8165 144.521 18.4885C144.41 15.1606 146.974 12.5493 150.303 12.4368C152.489 12.3053 154.585 13.5832 155.564 15.2794C156.151 16.2971 156.302 17.3411 156.354 18.2155ZM132.858 18.6636C132.97 21.9915 130.406 24.603 127.077 24.7155C123.749 24.828 121.137 22.2646 121.026 18.9366C120.914 15.6087 123.479 12.9974 126.807 12.8849C129.092 12.923 130.919 14.1293 131.899 15.8255C132.486 16.8432 132.806 17.7892 132.858 18.6636ZM109.193 19.2098C109.305 22.5378 106.74 25.1491 103.412 25.2616C100.083 25.3741 97.4722 22.8108 97.3607 19.4829C97.2492 16.1549 99.8135 13.5434 103.142 13.4309C105.328 13.2994 107.424 14.5776 108.403 16.2738C108.991 17.2915 109.311 18.2375 109.193 19.2098Z" />
                <path class="infographic-arrow__arrow-head" d="M165.846 0.545532L196.609 17.3864L166.629 35.6L165.846 0.545532Z" />
            </svg>

        </div>

        <div class="grant-info-highlight__data--date"><time datetime="23-11-2019">23 Nov 2019</time></div>
    </div>

    <div class="grant-info-highlight__recipient">
        <div class="grant-info-highlight__label">Recipient Organization</div>

        <div>
            <a href="#">Angmering Table tennis Club (360G-SE-2010008706)</a>
        </div>
    </div>
</div>
<div class="grant-info-highlight grid grid--three-columns">
  <div class="grant-info-highlight__funder">
    <div class="grant-info-highlight__label">Funding Organization</div>

    <div>
      <a href="{{ funder_url }}">{{ funder_name }}</a>
    </div>
  </div>

  <div class="grant-info-highlight__data">
    <div class="grant-info-highlight__data--amount">{{ amount }}</div>

    <div class="grant-info-highlight__data--infographic">
      {% include '@infographic-arrow' %}
    </div>

    <div class="grant-info-highlight__data--date"><time datetime="{{ date_timestamp }}">{{ date }}</time></div>
  </div>

  <div class="grant-info-highlight__recipient">
    <div class="grant-info-highlight__label">Recipient Organization</div>

    <div>
      <a href="{{ recipient_url }}">{{ recipient_name }}</a>
    </div>
  </div>
</div>
{
  "funder_url": "#",
  "funder_name": "Sport England (GB-COH-RC000766)",
  "recipient_url": "#",
  "recipient_name": "Angmering Table tennis Club (360G-SE-2010008706)",
  "amount": "£9,000",
  "date": "23 Nov 2019",
  "date_timestamp": "23-11-2019"
}
  • Content:
    .grant-info-highlight {
      box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.06);
      border-top: 4px solid $yellow;
      border-bottom: 4px solid $yellow;
      padding: 22px 24px 34px;
    
      @include breakpoint($medium) {
        padding: 22px 44px 34px;
      }
    
      a {
        font-size: 24px;
        font-weight: 400;
        text-decoration: underline;
      }
    
      &__funder {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 42px;
        background: $white;
    
        @include breakpoint($medium) {
          margin-bottom: 0;
        }
      }
    
      &__data {
        display: flex;
        justify-content: center;
        margin-bottom: 42px;
    
        @include breakpoint($medium) {
          margin-bottom: 0;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
    
        &--amount {
          color: $teal-dark;
          font-weight: 400;
          font-size: 27px;
          width: 33.33%;
          text-align: right;
    
          @include breakpoint($medium) {
            text-align: left;
            width: auto;
          }
        }
    
        &--infographic {
          width: 33.33%;
          transform: rotateZ(90deg);
          z-index: -1;
          display: flex;
          align-items: center;
          justify-content: center;
    
          @include breakpoint($medium) {
            transform: none;
            width: 100%;
          }
    
          .infographic-arrow {
            width: 100px;
            height: 60px;
            display: block;
    
            @include breakpoint($medium) {
              width: unset;
              height: unset;
            }
          }
    
        }
    
        &--date {
          width: 33.33%;
          color: $teal-dark;
          font-weight: 500;
          font-size: 20px;
    
          @include breakpoint($medium) {
            width: auto;
          }
        }
      }
    
      &__recipient {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    
      &__label {
        font-weight: 700;
        font-size: 20px;
        margin-bottom: 8px;
      }
    }
    
  • URL: /components/raw/grant-info-highlight/grant-info-highlight.scss
  • Filesystem Path: src/components/04-modules/grant-info-highlight/grant-info-highlight.scss
  • Size: 2 KB

No notes defined.