<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 class="fund__units">
<div class="unit-list">
<ul class="unit-list__list">
<li class="unit-list__unit">Deans Office</li>
<span class="unit-list__separator">•</span>
<li class="unit-list__unit">School of Music</li>
</ul>
</div>
</div>
<div class="fund__tags">
<div class="tag-list">
<ul class="tag-list__list">
<span class="tag-list__icon"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<mask id="mask0_4613_118086" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4613_118086)">
<path d="M9.50016 14.2673C9.24461 14.5229 8.92794 14.6507 8.55016 14.6507C8.17239 14.6507 7.85572 14.5229 7.60016 14.2673L1.7335 8.40065C1.61127 8.27843 1.51405 8.13398 1.44183 7.96732C1.36961 7.80065 1.3335 7.62287 1.3335 7.43398V2.66732C1.3335 2.30065 1.46405 1.98676 1.72516 1.72565C1.98627 1.46454 2.30016 1.33398 2.66683 1.33398H7.4335C7.62239 1.33398 7.80016 1.3701 7.96683 1.44232C8.1335 1.51454 8.27794 1.61176 8.40016 1.73398L14.2668 7.61732C14.5224 7.87287 14.6502 8.18676 14.6502 8.55898C14.6502 8.93121 14.5224 9.2451 14.2668 9.50065L9.50016 14.2673ZM8.55016 13.334L13.3168 8.56732L7.4335 2.66732H2.66683V7.43398L8.55016 13.334ZM4.3335 5.33398C4.61127 5.33398 4.84739 5.23676 5.04183 5.04232C5.23627 4.84787 5.3335 4.61176 5.3335 4.33398C5.3335 4.05621 5.23627 3.8201 5.04183 3.62565C4.84739 3.43121 4.61127 3.33398 4.3335 3.33398C4.05572 3.33398 3.81961 3.43121 3.62516 3.62565C3.43072 3.8201 3.3335 4.05621 3.3335 4.33398C3.3335 4.61176 3.43072 4.84787 3.62516 5.04232C3.81961 5.23676 4.05572 5.33398 4.3335 5.33398Z" fill="#4E4E4E" />
</g>
</svg>
</span>
<li class="tag-list__tag">Deans Office</li>
<span class="tag-list__separator">,</span>
<li class="tag-list__tag">School of Music</li>
</ul>
</div>
</div>
</div>
<div class="fund__input-wrapper">
<div class="fund__submit-button" data-cy="fund__submit-button" data-giving-submit>
<a href="#?fund=11331630" class="standard-button standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Give</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_5509_8875)">
<path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
</g>
</svg></span></span></div>
</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 class="fund__units">
<div class="unit-list">
<ul class="unit-list__list">
<li class="unit-list__unit">Deans Office</li>
<span class="unit-list__separator">•</span>
<li class="unit-list__unit">School of Music</li>
</ul>
</div>
</div>
<div class="fund__tags">
<div class="tag-list">
<ul class="tag-list__list">
<span class="tag-list__icon"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<mask id="mask0_4613_118086" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<rect width="16" height="16" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4613_118086)">
<path d="M9.50016 14.2673C9.24461 14.5229 8.92794 14.6507 8.55016 14.6507C8.17239 14.6507 7.85572 14.5229 7.60016 14.2673L1.7335 8.40065C1.61127 8.27843 1.51405 8.13398 1.44183 7.96732C1.36961 7.80065 1.3335 7.62287 1.3335 7.43398V2.66732C1.3335 2.30065 1.46405 1.98676 1.72516 1.72565C1.98627 1.46454 2.30016 1.33398 2.66683 1.33398H7.4335C7.62239 1.33398 7.80016 1.3701 7.96683 1.44232C8.1335 1.51454 8.27794 1.61176 8.40016 1.73398L14.2668 7.61732C14.5224 7.87287 14.6502 8.18676 14.6502 8.55898C14.6502 8.93121 14.5224 9.2451 14.2668 9.50065L9.50016 14.2673ZM8.55016 13.334L13.3168 8.56732L7.4335 2.66732H2.66683V7.43398L8.55016 13.334ZM4.3335 5.33398C4.61127 5.33398 4.84739 5.23676 5.04183 5.04232C5.23627 4.84787 5.3335 4.61176 5.3335 4.33398C5.3335 4.05621 5.23627 3.8201 5.04183 3.62565C4.84739 3.43121 4.61127 3.33398 4.3335 3.33398C4.05572 3.33398 3.81961 3.43121 3.62516 3.62565C3.43072 3.8201 3.3335 4.05621 3.3335 4.33398C3.3335 4.61176 3.43072 4.84787 3.62516 5.04232C3.81961 5.23676 4.05572 5.33398 4.3335 5.33398Z" fill="#4E4E4E" />
</g>
</svg>
</span>
<li class="tag-list__tag">Deans Office</li>
<span class="tag-list__separator">,</span>
<li class="tag-list__tag">School of Music</li>
</ul>
</div>
</div>
</div>
<div class="fund__input-wrapper">
<div class="fund__submit-button" data-cy="fund__submit-button" data-giving-submit>
<a href="#?fund=11341209" class="standard-button standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Give</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_5509_8875)">
<path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
</g>
</svg></span></span></div>
</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-form",
"showHeading": true,
"heading": "Optional header for giving form",
"buttonText": "Continue",
"innerBlocks": {
"funds": [
{
"post": {
"tags": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
],
"units": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
]
},
"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"
}
},
{
"post": {
"tags": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
],
"units": [
{
"term_id": 5,
"name": "Deans Office",
"slug": "deans-office",
"term_taxonomy_id": 5,
"taxonomy": "units_and_areas",
"parent": 0
},
{
"term_id": 6,
"name": "School of Music",
"slug": "school-of-music",
"term_taxonomy_id": 6,
"taxonomy": "units_and_areas",
"parent": 0
}
]
},
"fields": {
"name": "Arts at Illinois Scholarship Fund",
"description": "",
"fundId": "11341209",
"givingUrl": "#?fund=11341209"
}
}
]
}
}
}
.giving-form
@extends $componentWithMargin
&__header
@extends $headline2
color blue500
margin-bottom 48px
&--is-hidden
@extends $visually-hidden
&__submit-button
margin-top 48px
No notes defined.