Custom theme (replace with client name)

Giving: Default 

<div class="giving-form" data-cy="giving-form">
    <h2 class="giving-form__header
            " id="Optional header for giving form" data-cy="giving-form__header" data-show-heading="true">
        Optional header for giving form
    </h2>
    <div class="giving-form__form">

        <li class="fund">
            <div class="fund__text">
                <p class="fund__name" data-cy="fund__name">
                    College of Fine and Applied Arts Annual Fund
                </p>
                <p class="fund__description" data-cy="fund__description">
                    Description of fund description of fund fund description of fund fund description of fund fund description of fund fund.
                </p>
            </div>
            <div class="fund__input-wrapper">
                <div class="fund__submit-button" data-cy="fund__submit-button" data-giving-submit>
                    <a href="#?fund=11331630" aria-label="Give to College of Fine and Applied Arts Annual Fund" class="
            standard-button
            standard-button--natural-width
            

        ">
                        <span class="standard-button__text">
                            Give
                        </span>

                        <span class="standard-button__icon">
                            <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
                                <path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
                            </svg>

                        </span>
                    </a>
                </div>
            </div>
        </li>
        <li class="fund">
            <div class="fund__text">
                <p class="fund__name" data-cy="fund__name">
                    Arts at Illinois Scholarship Fund
                </p>
            </div>
            <div class="fund__input-wrapper">
                <div class="fund__submit-button" data-cy="fund__submit-button" data-giving-submit>
                    <a href="#?fund=11341209" aria-label="Give to Arts at Illinois Scholarship Fund" class="
            standard-button
            standard-button--natural-width
            

        ">
                        <span class="standard-button__text">
                            Give
                        </span>

                        <span class="standard-button__icon">
                            <svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
                                <path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
                            </svg>

                        </span>
                    </a>
                </div>
            </div>
        </li>
    </div>
</div>
 
<div class="giving-form"
     data-cy="giving-form">
    {% if fields.showHeading|default %}
        <h2 class="giving-form__header
            {{ fields.showHeading ? '' : 'giving-form__header--is-hidden'}}"
            id="{{ fields.heading|sanitize }}"
            data-cy="giving-form__header"
            {{ fields.showHeading ? 'data-show-heading="true"' : 'data-show-heading="false"'}}>
            {{ fields.heading }}
        </h2>
    {% endif %}
    <div class="giving-form__form">
        {{ content }}
        {% for item in fields.innerBlocks.funds  %}
            {% include 'partials/fund/fund.twig' with item %}
        {% endfor %}
    </div>
</div>
 
{
  "fields": {
    "type": "giving",
    "showHeading": true,
    "heading": "Optional header for giving form",
    "buttonText": "Continue",
    "innerBlocks": {
      "funds": [
        {
          "fields": {
            "name": "College of Fine and Applied Arts Annual Fund",
            "description": "Description of fund description of fund fund description of fund fund description of fund fund description of fund fund.",
            "fundId": "11331630",
            "givingUrl": "#?fund=11331630"
          }
        },
        {
          "fields": {
            "name": "Arts at Illinois Scholarship Fund",
            "description": "",
            "fundId": "11341209",
            "givingUrl": "#?fund=11341209"
          }
        }
      ]
    }
  }
}
  • Content: 
    .giving-form
    @extends $componentWithMargin

    &__header
        @extends $headline1
        margin-bottom 32px

        &--is-hidden
            @extends $visually-hidden

    &__submit-button
        margin-top 48px
  • URL: /components/raw/giving-form/giving-form.styl
  • Filesystem Path: patterns/blocks/giving-form/giving-form.styl
  • Size: 223 Bytes

No notes defined.