Primer CSS Links

Last Updated : 10 Jun, 2022

Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and colour. Created with GitHub’s design system, it is highly reusable and flexible.

Primer CSS Links are used to decorate links in the webpage. Primer CSS has lots of customizations for the links. Links generally have default CSS but that can be customized with the Primer CSS link classes easily.

Primer CSS Links Types and classes:

Default Link: It uses the class Link and displays a blue colour text.
Primary Link: It uses the class Link–primary and displays blue colour text with an underline on hovering over the text.
Secondary Link: It uses the class Link–secondary and displays a subtle blue colour text with an underline hovering over the text.
Muted Link: It uses the class Link–muted and displays a blue colour text without an underline hovering over the text.
Muted Link Alternative: It uses the class no-underline with class Link–primary and displays a blue colour text without an underline hovering over the text.
On Hover Link: It uses the class Link–onHover to partially colour the text with an underline on hover.
Nested Link: The link can be nested with the class Link inside another class with some other link class.

Syntax: Create a text with a link as follows:

<a href="#" class="Link">...</a>

Example 1: In the following example, we have some HTML paragraphs with links inside them.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" style="padding:1em;"> 
        <center> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <strong>Primer CSS Links</strong> 
            <br /><br /> 
            <p> 
                Tutorials for Data Structures can be found 
                <a href= 
            "https://www.geeksforgeeks.org/data-structures/"
                     class="Link"> 
                    here 
                </a> 
            </p> 
            <p> 
                Tutorials for Algorithms can be found 
                <a href= 
"https://www.geeksforgeeks.org/introduction-to-algorithms/" 
                    class="Link"> 
                    here 
                </a> 
            </p> 
  
        </center> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In the following example, we have links of different types like default, primary, secondary, muted, etc.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
    <script src= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" style="padding:1em;"> 
        <center> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <strong>Primer CSS Links</strong> 
            <br /><br /> 
  
            <ul> 
                <li><a class="Link" href="#"> 
                    Default Link 
                </a></li> 
                <li><a class="Link--primary" href="#"> 
                    Primary Link 
                </a></li> 
                <li><a class="Link--secondary" href="#"> 
                    Secondary Link 
                </a></li> 
                <li><a class="Link--muted" href="#"> 
                    Muted Link 
                </a></li> 
                <li><a class="Link--primary Link--onHover" href="#"> 
                    onHover Link 
                </a></li> 
            </ul> 
        </center> 
    </div> 
</body> 
  
</html>