Action Links
Action Links are styled links used when wanting to present the user with multiple action items.
Action Links usually come in the form of a list of links but may also be used by itself. Here are the variations:
- Single Action Link
- Single Action Link (Quiet) - to be used for action links found within body copy
- Action Link List - vertical list of action links
- Action Link List (Inline) - horizontal list of action links to be used when design/layout calls for it
- Action Link List (Inline - Centered) - centered inline list to be used when design/layout calls for it
When to use Action Links
Action Links were designed, in part, to replace the overuse of buttons in particular areas. Buttons are reserved more for specific primary or secondary calls to action. But there are times where there are additional links or actions that need to be highlighted and standardized that should probably not be made into buttons. These are instances where Action Links can be used.
Single Action Link
Basic Code and Classes:
<a class="pgs-action-link" href="[URL]"><span class="ico fas fa-chevron-right"></span>Meet Tamera and other inspiring Dallas College students</a>Single Action Link (Quiet)
Basic Code and Classes:
The code is the same as the Single Action Link but you will need to add .pgs-action-link--quiet to the anchor element.
<a class="pgs-action-link pgs-action-link--quiet" href="[URL]"><span class="ico fas fa-chevron-right"></span>Meet Tamera and other inspiring Dallas College students</a>Action Link List
Basic Code and Classes:
<ul class="pgs-action-link-list fa-ul">
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
</ul>Action Link List (Inline)
Basic Code and Classes:
The code is the same as the Action Link List but you will need to add .list-inline to the <ul> element.
<ul class="list-inline pgs-action-link-list fa-ul">
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
</ul>- You can also add
.no-marginto the<ul>element to remove extra margins from the left and bottom of the list
Action Link List (Inline - Centered)
Basic Code and Classes:
The code is the same as the Action Link List Inline but you will need to add .pgs-action-link-list--center to the <ul> element.
<ul class="list-inline pgs-action-link-list pgs-action-link-list--center fa-ul">
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
<li><a class="pgs-action-link" href="[URL]"><span class="fa-li"><span class="ico fas fa-chevron-right"></span></span>...</a></li>
</ul>- You can also add
.no-marginto the<ul>element to remove extra margins from the left and bottom of the list