Cornerstone

Action Bar

Action Bar

The Action Bar is a fixed element at the bottom of the page that provides a list of call-to-action items. It is designed to keep key interactions accessible and can be easily customized using SCSS.

<div class="tcu-action-bar">
    <div class="tcu-action-bar__inner">

        <button class="tcu-action-bar__trigger _action" aria-haspopup="true" aria-expanded="false">
            <span class="show-for-sr">Open Action Menu</span>
        </button>

        <div class="tcu-action-bar__audience">
            <!--
        I am a...
        <button class="tcu-action-bar__audience-trigger" aria-haspopup="true" aria-expanded="false">Future Horned Frog</button>
        <ul class="tcu-audience-list">
          <li class="_is-active"><button>Future Horned Frog</button></li>
          <li><button>Parent/Family Member</button></li>
          <li><button>Visitor</button></li>
        </ul>
         -->
        </div>

        <div class="tcu-action-bar__nav">
            <div class="tcu-action-bar__nav-inner">
                <button class="show-for-small-only">Close</button>
                <ul>
                    <li><a href="#">Apply</a></li>
                    <li><a href="#">Visit</a></li>
                    <li><a href="#">Request Info</a></li>
                    <li><a href="#">Give</a></li>
                </ul>
            </div>
        </div>

        <!-- <button class="tcu-action-bar__trigger _arrow _audience" aria-haspopup="true" aria-expanded="false">
        <span class="show-for-sr">Open Audience Menu</span>
      </button> -->
    </div>
</div>