Custom theme (replace with client name)

Fund 

<li class="fund">
    <div class="fund__text">
        <p class="fund__name" data-cy="fund__name">

        </p>
    </div>
    <div class="fund__input-wrapper">
        <div class="fund__submit-button" data-cy="fund__submit-button" data-giving-submit>
            <a href="" aria-label="Give to " 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">
            {{ fields.name }}
        </p>
        {% if fields.description | default %}
            <p class="fund__description"
               data-cy="fund__description">
                {{ fields.description }}
            </p>
        {% endif %}
    </div>
    <div
        class="fund__input-wrapper">
        <div class="fund__submit-button"
             data-cy="fund__submit-button"
             data-giving-submit>
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: 'Give',
                    ariaLabel: 'Give to ' ~ fields.name,
                    url: fields.givingUrl,
                    icon: 'right-chevron',
                }
            } %}
        </div>
    </div>
</li>
 
/* No context defined. */
  • Content: 
    .fund
    --fundBackgroundColor cloud
    --prefixColor darkOrange

    background-color var(--fundBackgroundColor)
    justify-content space-between
    margin 16px 0
    padding 24px 16px

    +above(largeDeviceBreakpoint)
        align-items center
        display flex
        padding 32px


    &__text
        margin-bottom 24px

        +above(largeDeviceBreakpoin)
            flex 2 0 0px
            margin-bottom 0

    &__name
        @extends $headline3
        display block
        margin-bottom 8px

        &--dark
            color white

    &__description
        @extends $bodyLarge


    &__input-wrapper
        position relative

        +above(largeDeviceBreakpoint)
            flex 1 0 0
            margin-left 32px


    &__input-prefix
        color var(--prefixColor)
        font-family proximaNova
        font-size 20px
        font-weight 800
        left 14px
        line-height 1.4
        position absolute
        top 16px

    &__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%

        &:focus
            border-color var(--focusBorderColor)
  • URL: /components/raw/fund/fund.styl
  • Filesystem Path: patterns/partials/fund/fund.styl
  • Size: 1.3 KB

No notes defined.