<div class="prose">
    <section class="accordion-list">
        <div class="accordion-list__item">
            <div class="accordion">
                <h2 class="accordion__trigger accordion-list__heading">Discuss and Plan</h2>
                <section class="prose__section accordion__extra" aria-hidden>
                    <p>Publishing will help to improve the accuracy of your data as you delve into the detail of what information you currently collect, how you want to present it and what information is missing. Begin by sketching out where information on your grantmaking is currently held and how often it is updated. Note how you categorise the types of data you gather.</p>
                    <p>Talk through your findings with others in your organisation to gauge interest in and support for finding out more about open data publication and the 360Giving Standard.</p>
                    <p>You can also learn from the experience of other publishers. We can put you in touch with other grantmakers to share best practice with you.</p>

                    <h4>Request your publisher prefix</h4>
                    <p>Once you have decided to publish data please contact support@threesixtygiving.org to request your own 360Giving publisher prefix. Your 360Giving prefix is needed to provide every grant with a unique identifier. For further information see our guidance about identifiers.</p>
                </section>
            </div>
        </div>

        <div class="accordion-list__item">
            <div class="accordion">
                <h2 class="accordion__trigger accordion-list__heading">Discuss and Plan</h2>
                <section class="prose__section accordion__extra" aria-hidden>
                    <p>Publishing will help to improve the accuracy of your data as you delve into the detail of what information you currently collect, how you want to present it and what information is missing. Begin by sketching out where information on your grantmaking is currently held and how often it is updated. Note how you categorise the types of data you gather.</p>
                    <p>Talk through your findings with others in your organisation to gauge interest in and support for finding out more about open data publication and the 360Giving Standard.</p>
                    <p>You can also learn from the experience of other publishers. We can put you in touch with other grantmakers to share best practice with you.</p>

                    <h4>Request your publisher prefix</h4>
                    <p>Once you have decided to publish data please contact support@threesixtygiving.org to request your own 360Giving publisher prefix. Your 360Giving prefix is needed to provide every grant with a unique identifier. For further information see our guidance about identifiers.</p>
                </section>
            </div>
        </div>

        <div class="accordion-list__item">
            <div class="accordion">
                <h2 class="accordion__trigger accordion-list__heading">Discuss and Plan</h2>
                <section class="prose__section accordion__extra" aria-hidden>
                    <p>Publishing will help to improve the accuracy of your data as you delve into the detail of what information you currently collect, how you want to present it and what information is missing. Begin by sketching out where information on your grantmaking is currently held and how often it is updated. Note how you categorise the types of data you gather.</p>
                    <p>Talk through your findings with others in your organisation to gauge interest in and support for finding out more about open data publication and the 360Giving Standard.</p>
                    <p>You can also learn from the experience of other publishers. We can put you in touch with other grantmakers to share best practice with you.</p>

                    <h4>Request your publisher prefix</h4>
                    <p>Once you have decided to publish data please contact support@threesixtygiving.org to request your own 360Giving publisher prefix. Your 360Giving prefix is needed to provide every grant with a unique identifier. For further information see our guidance about identifiers.</p>
                </section>
            </div>
        </div>
    </section>
</div>
<div class="prose">
  <section class="accordion-list">
    <div class="accordion-list__item">
      <div class="accordion">
        <h2 class="accordion__trigger accordion-list__heading">Discuss and Plan</h2>
        <section class="prose__section accordion__extra" aria-hidden>
          <p>Publishing will help to improve the accuracy of your data as you delve into the detail of what information you currently collect, how you want to present it and what information is missing. Begin by sketching out where information on your grantmaking is currently held and how often it is updated. Note how you categorise the types of data you gather.</p>
          <p>Talk through your findings with others in your organisation to gauge interest in and support for finding out more about open data publication and the 360Giving Standard.</p>
          <p>You can also learn from the experience of other publishers. We can put you in touch with other grantmakers to share best practice with you.</p>

          <h4>Request your publisher prefix</h4>
          <p>Once you have decided to publish data please contact support@threesixtygiving.org to request your own 360Giving publisher prefix. Your 360Giving prefix is needed to provide every grant with a unique identifier. For further information see our guidance about identifiers.</p>
        </section>
      </div>
    </div>

    <div class="accordion-list__item">
      <div class="accordion">
        <h2 class="accordion__trigger accordion-list__heading">Discuss and Plan</h2>
        <section class="prose__section accordion__extra" aria-hidden>
          <p>Publishing will help to improve the accuracy of your data as you delve into the detail of what information you currently collect, how you want to present it and what information is missing. Begin by sketching out where information on your grantmaking is currently held and how often it is updated. Note how you categorise the types of data you gather.</p>
          <p>Talk through your findings with others in your organisation to gauge interest in and support for finding out more about open data publication and the 360Giving Standard.</p>
          <p>You can also learn from the experience of other publishers. We can put you in touch with other grantmakers to share best practice with you.</p>

          <h4>Request your publisher prefix</h4>
          <p>Once you have decided to publish data please contact support@threesixtygiving.org to request your own 360Giving publisher prefix. Your 360Giving prefix is needed to provide every grant with a unique identifier. For further information see our guidance about identifiers.</p>
        </section>
      </div>
    </div>

    <div class="accordion-list__item">
      <div class="accordion">
        <h2 class="accordion__trigger accordion-list__heading">Discuss and Plan</h2>
        <section class="prose__section accordion__extra" aria-hidden>
          <p>Publishing will help to improve the accuracy of your data as you delve into the detail of what information you currently collect, how you want to present it and what information is missing. Begin by sketching out where information on your grantmaking is currently held and how often it is updated. Note how you categorise the types of data you gather.</p>
          <p>Talk through your findings with others in your organisation to gauge interest in and support for finding out more about open data publication and the 360Giving Standard.</p>
          <p>You can also learn from the experience of other publishers. We can put you in touch with other grantmakers to share best practice with you.</p>

          <h4>Request your publisher prefix</h4>
          <p>Once you have decided to publish data please contact support@threesixtygiving.org to request your own 360Giving publisher prefix. Your 360Giving prefix is needed to provide every grant with a unique identifier. For further information see our guidance about identifiers.</p>
        </section>
      </div>
    </div>
  </section>
</div>
/* No context defined. */
  • Content:
    .accordion-list {
      --accordion-hsl: var(--teal-hsl);
      --accordion-text-hsl: var(--teal-dark-hsl);
    
      list-style: none;
    
      .accordion-list__heading {
        padding: 0;
        margin: 0;
        color: hsla(var(--accordion-text-hsl), 1);
      }
    
      &__item {
        padding-bottom: 24px;
        counter-increment: items;
        position: relative;
    
        .accordion:before {
          content: counter(items);
          position: absolute;
          top: 4px;
          right: calc(100% + 32px);
          padding: 4px;
          width: 48px;
          height: 48px;
          border-radius: 100px;
          font-weight: 600;
          font-size: 1.4rem;
          text-align: center;
          border: 2px solid hsla(var(--accordion-hsl), 1);
          color: hsla(var(--accordion-hsl), 1);
          background-color: hsla(var(--white-hsl), 1);
          z-index: 1;
          transition: all .3s ease;
        }
    
        .accordion--expanded:before {
          background-color: hsla(var(--accordion-hsl), 1);
          color: hsla(var(--white-hsl), 1);
        }
    
        .accordion:after {
          content: '';
          position: absolute;
          top: 44px;
          right: calc(100% + 54px);
          width: 0;
          height: 100%;
          border: 2px solid hsla(var(--accordion-hsl), 1);
        }
    
        &:last-of-type .accordion:after { border: 0; }
      }
    }
    
    .accordion-list--no-numbers {
      .accordion:before {
        content: 'add';
        @extend .u-material-icons;
        font-size: 1.8rem;
        padding: 8px;
      }
    
      .accordion--expanded:before {
        transform: rotate(45deg);
      }
    }
  • URL: /components/raw/accordion-list/accordion-list.scss
  • Filesystem Path: src/components/04-modules/accordion-list/accordion-list.scss
  • Size: 1.4 KB

No notes defined.