Cornerstone

Sticky Flags

If the user is on the page that a sticky flag links to, that flag should be hidden. See https://admissions.tcu.edu/index.php as an example.

The sticky flags require some JS to show/hide the flags on scroll. Whenever a user has scrolled down into the main section of the site, they minimize to an icon only view.

Svgs and background colors are inlined in the the sticky-flags.php (e.g. in the hr site, site/_resources/includes/sticky-flags.php)

Flag background color is set to $neutral-40, and icon background color is set to $primary by default.

CSS variable for flags’ background: –sticky-bg-color.

CSS variable for icons’ background: –sticky-icon-bg-color.

<ul class="tcu-flags _onleave">
    <li>
        <a class="tcu-flags__button" id="tcu-flags--visit" href="#" style="--sticky-bg-color: #eee">Visit
            <span class="sticky-icons" style="--sticky-icon-bg-color: #4d1979"><svg width='28' height='32' xmlns='http://www.w3.org/2000/svg' alt=''>
                    <path d='M13.897.502h.021H14.103C21.459.607 27.5 6.117 27.5 12.868c0 3.926-1.859 7.752-5.085 11.49-2.169 2.512-4.379 4.438-7.502 6.832a1.5 1.5 0 0 1-1.826 0 42.98 42.98 0 0 1-2.052-1.72 53.79 53.79 0 0 1-4.233-4.171C2.872 20.954.5 16.758.5 12.869.5 6.117 6.541.606 13.897.501zm.021 3h.022C8.158 3.584 3.5 7.832 3.5 12.868c0 2.944 2.056 6.58 5.527 10.419a53.199 53.199 0 0 0 4.993 4.797c6.593-5.2 10.48-9.936 10.48-15.216 0-5.035-4.658-9.284-10.418-9.366l-.084-.001-.08.001zM14 18.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-3a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z' fill='white' fill-rule='nonzero' />
                </svg></span>
        </a>
    </li>
    <li>
        <a class="tcu-flags__button" id="tcu-flags--connect" href="#" style="--sticky-bg-color: #eee">Connect
            <span class="sticky-icons" style="--sticky-icon-bg-color: #4d1979"><svg width='28' height='28' xmlns='http://www.w3.org/2000/svg' alt=''>
                    <path d='M27.5 18.187c0 1.877-.7 3.618-1.973 4.973l.424 2.599c.207 1.266-1.17 2.19-2.264 1.52l-2.665-1.634c-.84.194-1.735.292-2.669.292-3.664 0-6.662-1.545-8.15-4.073a15.537 15.537 0 0 1-.847-.186L5.08 24.281c-1.095.667-2.468-.259-2.26-1.524l.697-4.244C1.572 16.591.5 14.069.5 11.333.5 5.083 5.908.5 13.5.5s13 4.584 13 10.833c0 .922-.118 1.808-.343 2.648a7.175 7.175 0 0 1 1.343 4.206zm-12.78 3.94c.98.516 2.213.81 3.633.81.899 0 1.73-.117 2.474-.342a1.5 1.5 0 0 1 1.217.158l.42.257-.025-.148a1.5 1.5 0 0 1 .51-1.385c1.008-.854 1.551-2.008 1.551-3.29 0-.253-.021-.5-.063-.742-2.05 2.654-5.493 4.4-9.717 4.681zm8.78-10.794c0-4.472-3.965-7.833-10-7.833s-10 3.36-10 7.833c0 2.132.914 4.059 2.595 5.474.404.34.6.869.514 1.39l-.3 1.824 2.04-1.241a1.5 1.5 0 0 1 1.21-.156c.192.057.387.11.586.159a1.5 1.5 0 0 1 2.054.33c.423.036.857.054 1.301.054 4.51 0 7.864-1.877 9.271-4.693a1.5 1.5 0 0 1 .59-1.722c.092-.458.139-.932.139-1.419z' fill='white' fill-rule='nonzero' />
                </svg></span>
        </a>
    </li>
    <li>
        <a class="tcu-flags__button" id="tcu-flags--apply" href="#" style="--sticky-bg-color: #fed277">Apply
            <span class="sticky-icons" style="--sticky-icon-bg-color: #4d1979"><svg width='32' height='32' xmlns='http://www.w3.org/2000/svg' alt=''>
                    <path d='M16 30c7.732 0 14-6.268 14-14S23.732 2 16 2 2 8.268 2 16s6.268 14 14 14zM9 15.934L14.353 21 22 12' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' />
                </svg></span>
        </a>
    </li>
</ul>