Organizational Cards

Organizational "Org" Cards are components used to organize and stack various links, areas and pages for easy navigation.

Org Cards are used more on top level pages to provide users an easier way to navigate deep into the content of that particular area, section or subsite. It comes in the form of three different applications:

• Standard Org Card - meant to organize a set of links; heading may or may not be a link
• Org Card with Button - after presenting a limited list of links, the button can be used to show all additional navigational options
• Org Card Heading Link - visually it matches the headings of other org cards which means it matches in terms of importance but if the site doesn't have sub pages that make sense to highlight here, an Org Card Heading Link could work

Standard Org Card

Sample Code:

<div class="pgs-org-card bg-cgrey-05">
     <h2 class="pgs-org-card__heading bg-cprimary"><a href="#">
        <span class="ico fa fa-life-ring" aria-hidden="true"></span>Get Help</a></h2>
     <div class="pgs-org-card__body">
        <ul class="pgs-org-card__list fa-ul">
           <li>
              <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Call Us</a></li>
           <li>
              <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Technical Support</a></li>
           <li>
              <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Chat/Text With Us</a></li>
           <li>
              <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Request Information</a></li>
        </ul>
     </div>
</div>

Org Card with Button

Sample Code:

<div class="pgs-org-card bg-cgrey-05">
     <h2 class="pgs-org-card__heading bg-cprimary">
        <span class="ico fas fa-shield-alt" aria-hidden="true"></span>Police &amp; Emergency</h2>
     <div class="pgs-org-card__body--w-btn">
         <ul class="pgs-org-card__list fa-ul">
            <li>
               <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Frequently Asked Questions (FAQ)</a></li>
            <li>
               <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Technical Support</a></li>
            <li>
               <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Chat/Text &#8203;With Us</a></li>
            <li>
               <span class="fa-li"><span class="ico fas fa-chevron-right" aria-hidden="true"></span></span><a href="#">Request Information</a></li>
         </ul>
        <a href="/police-safety/Pages/default.aspx#campus-info" class="pgs-org-card__btn button button-mn bg-cprimary">See Campus Police Info</a> </div>
  </div>

Org Card with Button

Sample Code:

<div class="pgs-org-card">
    <a class="h2 pgs-org-card__heading bg-cprimary-lt" href="/contact/pages/social-media.aspx">
        <span class="ico fab fa-facebook" aria-hidden="true"></span>Social Media Directory
    </a>
</div>