7Links
There are three main link styles within the Service Year Exchange. The following guidelines provide general uses for each type of link style.
7.1Primary Link
Primary links are blue (#1678B6). On hover, the background will expand from the bottom to cover the background of the link with 20% opacity of the link's color. Use primary links for links that are not part of a paragraph or other larger body of text.
Primary links may have an icon. When present, the icon is placed on the left hand side of the link text and matches the style and behavior of the link.
<p><a href="#" class="link--primary">This is a primary link.</a></p>
<p><a href="#" class="link--primary"><svg class="svg-icon svg-icon--blue" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--envelope"></use></svg> This is a primary link with an icon.</a></p>
7.2Secondary Link
Secondary links are used in proximity to primary links to provide for visual hierarchy when necessary. Secondary links are black with gray underline as illustrated below. On hover, the line will expand to cover the background of the link with 20% opacity of the link's color. The text on secondary links may be bold face.
Secondary links are also used within a text block. When used as part of a text block they inherit the color of the text around them and have a 2px underline at 35% opacity. On hover, the line will expand to cover the background of the link with 20% opacity of the link's color.
<p><a href="#" class="link--secondary">This is a secondary link.</a></p>
<p><a href="#" class="link--secondary" style="color: #58799C;">This is a secondary link.</a></p>
<p style="padding: 1.5rem; background-color: #33475c;"><a href="#" class="link--secondary" style="color:#ffffff;">This is a secondary link.</a></p>