Skip to main content

iGuides

Version: 2.0.0
Edit

The iGuide is a script located at the top of each Illinois State webpage. It includes a link to the main domain page (IllinoisState.edu) and links to common resources. Everything on the IllinoisState.edu domain should have the iGuide (as stated in Policy 9.5.2). Further documentation on the iGuide component can be found in the Foundation section.

iGuide v3

Author: Ryan Christie, Amanda Smith
Since: 2.0.0
Source: /source/patterns/components/iguides.scss#L9

<!-- iguide v3 -->
<nav role="navigation" aria-label="University Navigation">
   <script type="text/javascript" src="//iguides.illinoisstate.edu"><!--SCRIPT--></script>
   <div id="iguide-filler"></div>
   <div id="iguide-float">
     <div class="iguide-link-container">
        <a class="iguide-isu" href="http://illinoisstate.edu/?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage">IllinoisState.edu</a>
        <span class="iguide-link-divider"></span>
        <a class="iguide-link" id="iguide-link-giving" href="https://giving.illinoisstate.edu/?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage">Giving</a>
        <span class="iguide-link-divider"></span>
        <a class="iguide-link" id="iguide-link-news" href="https://news.illinoisstate.edu/?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage">News</a>
        <span class="iguide-link-divider"></span>
        <a class="iguide-link" id="iguide-link-events" href="http://events.illinoisstate.edu/?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage">Events</a>
        <span class="iguide-link-divider"></span>
        <a class="iguide-link" id="iguide-link-map" href="http://maps.illinoisstate.edu/?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage">Map</a>
        <span class="iguide-link-divider"></span>
        <a class="iguide-link" id="iguide-link-apply" href="https://illinoisstate.edu/apply/?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage">Apply</a>
        <span class="iguide-link-divider"></span>
        <a class="iguide-link" id="iguide-link-search" href="http://search.illinoisstate.edu/?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage">Search/A-Z</a>
      </div>
      <span class="iguide-link-divider"></span>
      <a id="iguide-my-link" title="My Illinois State" href="http://my.illinoisstate.edu?utm_source=mary-core.webdemo.ilstu.edu&amp;utm_medium=iguide&amp;utm_campaign=iguide+usage"> <img src="//iguides.illinoisstate.edu/images/my-red-dark.png" alt="My" /> </a>
    </div>
  </nav>

iGuide v4

Author: Ryan Christie, Amanda Smith
Since: 2.0.0
Source: /source/patterns/components/iguides.scss#L549

<!-- iguide v4 -->
<div id="isu-iguide" class="isu-iguide">
  <div class="isu-iguide-float"></div>
  <div class="isu-iguide-row">
    <div class="isu-iguide-container">
      <div class="isu-iguide-col-1">
        <span id="isu-iguide-illinoisstate" class="isu-iguide-illinoisstate">
          <a id="isu-iguide-home" class="isu-iguide-home" href="http://IllinoisState.edu">
            <span>Illinois State<span class="isu-iguide-x-sm">&nbsp;University</span></span>
          </a>
        </span>
      </div>
      <div class="isu-iguide-col-2">
        <ul id="isu-iguide-university" class="isu-iguide-university">
          <li id="isu-iguide-giving">
            <a class="isu-iguide-giving" href="https://Giving.IllinoisState.edu">
              <span>Giving</span>
            </a>
          </li>
          <li id="isu-iguide-news">
              <a class="isu-iguide-news" href="https://News.IllinoisState.edu">
                <span>News</span>
               </a>
           </li>
           <li id="isu-iguide-events">
              <a class="isu-iguide-events" href="https://Events.IllinoisState.edu">
                <span>Events</span>
               </a>
            </li>
            <li id="isu-iguide-map">
              <a class="isu-iguide-map" href="http://Maps.IllinoisState.edu">
                <span>Map</span>
              </a>
            </li>
            <li id="isu-iguide-apply">
              <a class="isu-iguide-apply" href="https://IllinoisState.edu/Apply">
                <span>Apply</span>
              </a>
            </li>
            <li id="isu-iguide-my">
              <a class="isu-iguide-my" href="https://My.IllinoisState.edu">
                <span>My Illinois State</span>
              </a>
            </li>
          </ul>
          <span id="isu-iguide-search" class="isu-iguide-search">
            <a id="isu-iguide-search-link" class="isu-iguide-search-link" href="https://Search.IllinoisState.edu">
              <span>University Search</span>
            </a>
           </span>
           <div class="isu-iguide-search-box">
            <form id="isu-iguide-search-form" class="isu-iguide-search-form" action="https://search.illinoisstate.edu">
              <input type="text" placeholder="Search..." id="isu-iguide-search-text" name="q" required="required" />
            </form>
          </div>
          <button id="isu-iguide-menu-btn" class="isu-iguide-menu-btn" aria-hidden="false">Menu</button>
        </div>
      </div>
    </div>
</div>