Prime CSS Marketing Link Colors

Last Updated : 10 May, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Link Colors is used to give colors to the links using the color utility classes. We can give any color with the help of these utility classes.

Primer CSS Link Colors Classes:

color-fg-*: These color utility classes are used to give colors to the links.

Syntax:

<a href="#" class="link-mktg color-fg-*">
   ....
</a>

Example 1: This example demonstrates the implementation of Primer CSS Link Colors.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Link Colors </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Link Colors </h3> <br> 
  
        <a href="#" class="link-mktg text-bold  
                        f2-mktg color-fg-danger"> 
            This is link 
        </a> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Link Colors

Example 2: This example demonstrates the implementation of Primer CSS Link Colors.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Link Colors </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Link Colors </h3> <br> 
  
        <a href="#" class="link-mktg text-bold  
                        f2-mktg color-fg-danger"> 
            <svg class="octicon" viewBox="0 0 14 16" 
                 width="24" height="24"> 
                <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25  
                    7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0  
                    011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> 
                </path> 
            </svg> 
            This is link 1 
        </a> <br> 
  
        <a href="#" class="link-mktg text-bold  
                        f2-mktg color-fg-muted"> 
            <svg class="octicon" viewBox="0 0 16 16" 
                 width="24" height="24" > 
                <path fill-rule="evenodd" 
                    d="M11.5 7a4.499 4.499 0 11-8.998  
                        0A4.499 4.499 0 0111.5 7zm-.82 4.74a6  
                        6 0 111.06-1.06l3.04 3.04a.75.75 0  
                        11-1.06 1.06l-3.04-3.04z"> 
                </path> 
            </svg> 
            This is link 2 
        </a> 
    </div> 
</body> 
  
</html>