By default, the majority of inline links on our websites assume a basic style that has been designed to meet accessibility and usability requirements. There are several ways to adjust link styling and stay true to our established styles, depending on your objective.
External Links
If you are linking to another website or a page on our website that opens in a new tab or window, then you can add the CSS class extLink to your link, which will add a visual icon after the link text that indicates to users that the link opens in a new tab or window. If you're using the link editor interface in the CMS, select "External Link" in the Class field.
For the link to open in a new window, be sure the Target is set to "Open in new window/frame" in the link editor, or add target="_blank" rel="noopener" to the link element in the source code.
Example HTML Code
<a href="https://losrios.edu" target="_blank" rel="noopener" class="extLink">Los Rios website</a>
Result
Asset Links
If you are linking to an asset – such as a PDF or ZIP file – then you can add the CSS class link-icon to your link, which will add a visual icon before the link text and the file type after the link text, both of which indicate to users what kind of link they are clicking. If you're using the link editor interface in the CMS, select "Link Icon" in the Class field.
We typically open asset links in a new tab. To do this, make sure the Target is set to "Open in new window/frame" in the link editor, or add target="_blank" rel="noopener" to the link element in the source code.
Example HTML Code
<a href="lrccd/employee/doc/template/letterhead/letterhead.docx" target="_blank" rel="noopener" class="link-icon">Los Rios letterhead</a>
Result
Link Buttons
Links styled as buttons are often used for calls to action or in places where you want to grab a user's attention and direct them somewhere. There are two different button styles that can be used on the website: a regular button and a large button.
These buttons can be added via Insert > Template in the text editor. Select large-button or link-button.