<div class="giving-component giving-component--music giving-component--light giving-component--large">
<h2 class="giving-component__header giving-component__header--light
" id="Optional header for giving form">
Optional header for giving form
</h2>
<form class="giving-component__form" method="get" action="">
<div class="giving-component__fund giving-component__fund--light">
<div class="giving-component__fund-text">
<label class="giving-component__fund-name giving-component__fund-name--light" for="fund-11331630">
College of Fine and Applied Arts Annual Fund
</label>
<p class="giving-component__fund-description giving-component__fund-description--light">
Description of fund description of fund fund description of fund fund description of fund fund description of fund fund.
</p>
</div>
<div class="giving-component__fund-input-wrapper">
<input type="hidden" name="designation_id" value="11331630" data-giving-amount>
<div class="giving-component__fund-input-and-label">
<div class="giving-component__input-prefix-wrapper">
<span class="giving-component__fund-input-prefix" role="presentation">
$
</span>
<input class="giving-component__fund-input giving-component__fund-input--light " id="fund-11331630" type="number" min="5" name="value" aria-label="gift dollar amount for College of Fine and Applied Arts Annual Fund" data-giving-input>
</div>
</div>
<div class="giving-component__submit-button giving-component__submit-button--light" data-giving-submit>
<button type="submit" class="standard-button standard-button--music standard-button--light
standard-button--full-width standard-button--primary" aria-label="Donate to College of Fine and Applied Arts Annual Fund">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Continue</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="#FF552E" 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></span></div> </button>
</div>
</div>
</div>
</form>
<form class="giving-component__form" method="get" action="">
<div class="giving-component__fund giving-component__fund--light">
<div class="giving-component__fund-text">
<label class="giving-component__fund-name giving-component__fund-name--light" for="fund-11341209">
Arts at Illinois Scholarship Fund
</label>
</div>
<div class="giving-component__fund-input-wrapper">
<input type="hidden" name="designation_id" value="11341209" data-giving-amount>
<div class="giving-component__fund-input-and-label">
<div class="giving-component__input-prefix-wrapper">
<span class="giving-component__fund-input-prefix" role="presentation">
$
</span>
<input class="giving-component__fund-input giving-component__fund-input--light " id="fund-11341209" type="number" min="5" name="value" aria-label="gift dollar amount for Arts at Illinois Scholarship Fund" data-giving-input>
</div>
</div>
<div class="giving-component__submit-button giving-component__submit-button--light" data-giving-submit>
<button type="submit" class="standard-button standard-button--music standard-button--light
standard-button--full-width standard-button--primary" aria-label="Donate to Arts at Illinois Scholarship Fund">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Continue</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="#FF552E" 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></span></div> </button>
</div>
</div>
</div>
</form>
</div>
{% if is_wordpress %}
{{ enqueue_script('giving-form-input-check') }}
{% endif %}
{% set isOther = false %}
<div class="giving-component giving-component--{{ siteUnit }} giving-component--{{ background }} giving-component--{{ componentSpacing }}">
{% if component.header|default and (component.header|trim) %}
<h2 class="giving-component__header giving-component__header--{{ background }}
{{ component.hideHeader ? 'giving-component__header--is-hidden' : '' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
{% for fund in component.funds %}
{% set isOther = fund.fundId | upper == 'OTHER' %}
<form class="giving-component__form"
method="get"
action="{{ component.givingUrl }}">
<div
class="giving-component__fund giving-component__fund--{{ background }}">
<div class="giving-component__fund-text">
<label class="giving-component__fund-name giving-component__fund-name--{{ background }}"
for="fund-{{ fund.fundId }}">
{{ isOther ? 'Other' : fund.name }}
</label>
{% if fund.description | default %}
<p class="giving-component__fund-description giving-component__fund-description--{{ background }}">
{{ isOther ? 'Use this if you can’t find the right fund or prefer to specify a different purpose for your donation.' : fund.description }}
</p>
{% endif %}
</div>
<div
class="giving-component__fund-input-wrapper">
{% if not isOther %}
<input type="hidden"
name="designation_id"
value="{{ fund.fundId }}"
data-giving-amount>
{% endif %}
<div class="giving-component__fund-input-and-label">
<div class="giving-component__input-prefix-wrapper">
<span
class="giving-component__fund-input-prefix"
role="presentation">
$
</span>
<input class="giving-component__fund-input giving-component__fund-input--{{ background }} "
id="fund-{{ fund.fundId }}"
type="number"
min="5"
name="value"
aria-label="gift dollar amount for {{ fund.name }}"
data-giving-input>
</div>
</div>
<div class="giving-component__submit-button giving-component__submit-button--{{ background }}"
data-giving-submit>
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
isButton: true,
buttonType: 'submit',
text: component.buttonText,
icon: 'right-chevron',
width: 'full',
accessibleLabel: 'Donate to ' ~ fund.name
}
} %}
</div>
</div>
</div>
</form>
{% endfor %}
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "giving",
"header": "Optional header for giving form",
"buttonText": "Continue",
"funds": [
{
"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"
},
{
"name": "Arts at Illinois Scholarship Fund",
"description": "",
"fundId": "11341209"
}
]
}
}
.giving-component
--focusBorderColor illiniOrange
--fundBackgroundColor cloud
--prefixColor illiniOrange
&--dark
--focusBorderColor illiniOrange
--fundBackgroundColor charcoalLighter
--prefixColor illiniOrange
&--arch
--focusBorderColor industrialBlue
--fundBackgroundColor cloud
--prefixColor industrialBlue
&--art
--focusBorderColor archesBlue
--fundBackgroundColor cloud
--prefixColor archesBlue
&--college
--focusBorderColor illiniOrange
--fundBackgroundColor cloud
--prefixColor illiniOrange
&--dance
--focusBorderColor archesBlue
--fundBackgroundColor cloud
--prefixColor archesBlue
&--landarch
--focusBorderColor illiniOrange
--fundBackgroundColor cloud
--prefixColor illiniOrange
&--theatre
--focusBorderColor illiniOrange
--fundBackgroundColor cloud
--prefixColor illiniOrange
&--music
--focusBorderColor illiniOrange
--fundBackgroundColor cloud
--prefixColor illiniOrange
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&__header
@extends $headline1
margin-bottom 32px
&--dark
color white
&--is-hidden
@extends $visually-hidden
&__fund
background-color var(--fundBackgroundColor)
margin 16px 0
padding 24px 16px
+above(largeDeviceBreakpoint)
align-items center
display flex
flex-direction column
padding 32px
&__fund-text
margin-bottom 24px
width 100%
+above(largeDeviceBreakpoin)
flex 2 0 0px
margin-bottom 0
&__fund-name
@extends $primaryLead
display block
margin-bottom 8px
&--dark
color white
&__fund-description
@extends $primaryParagraph
&--dark
color white
&__fund-other-wrapper
display flex
gap 16px
flex-direction column
margin-top 24px
+above(largeDeviceBreakpoint)
align-items flex-end
flex-direction row
&__fund-input-wrapper
position relative
+above(largeDeviceBreakpoint)
flex 1 0 0
align-items flex-end
display flex
gap 32px
margin-top 32px
width 100%
&__fund-other-label
@extends $headline5
color charcoalLight
display block
margin-bottom 8px
&__fund-other-label--required
display none
color var(--prefixColor)
&.active
display inline-block
&__fund-input-and-label
flex-grow 1
&__input-prefix-wrapper
position relative
&__fund-input-prefix
color var(--prefixColor)
font-family proximaNova
font-size 20px
font-weight 800
left 14px
line-height 1.4
position absolute
top 16px
&__fund-input
background-color white
border solid 2px grey
color greyDarkest
display block
font-family proximaNova
font-size 20px
line-height 1.4
padding 14px 16px 14px 38px
transition all 0.3s ease
width 100%
&--dark
border-color charcoal
&:focus
border-color var(--focusBorderColor)
&__submit-button
padding 7px 0
There are no notes for this item.