Primer CSS Marketing Links

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.

Links are used to navigate to other web pages by the user by clicking on them. They are placed uniquely on web pages related to the content. There are different types of marketing links available in Primer CSS.

Link Sizes: Marketing Links can be designed in small and large sizes using f4-mktg and f3-mktg classes.
Link with emphasis: Links can be designed to give an underline using the link-emphasis-mktg class
Link colors: Links can be designed with different colors using the Primer color classes.

Add link-mktg class with these modifier classes to implement the above-mentioned marketing links.

Syntax:

<a href="#" class="link-mktg ">
  Text to be shown...
</a>

Example 1: This example demonstrates the different types of Primer CSS marketing links using the link-mktg class.

HTML

<!DOCTYPE html>
<html>
   
<head>
  <title>Primer CSS Marketing Links</title>
  <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
</head>
   
<body>
    <div class="text-center">
      <h1 class="color-fg-success">GeeksforGeeks </h1>
      <h5>Primer CSS Marketing Links</h5><br />
    </div>  
   
    <div class="text-center">
     Click <a href=
"https://practice.geeksforgeeks.org/"
    class="link-mktg link-emphasis-mktg color-fg-success f3-mktg mr-1">
      Geeks for Geeks</a> to learn how to code.  
    </div>
</body>
   
</html>

Output:

Link to GFG Practice

Example 2: This example demonstrates the different types of Primer CSS marketing links using the link-mktg class.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title>Primer CSS Marketing Links</title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
 
<body>
    <div class="text-center">
      <h1 class="color-fg-success">GeeksforGeeks </h1>
      <h5>Primer CSS Marketing Links</h5><br />
    </div>   
   
    <div class="text-center">
        <h5>Link - Sizes :</h5><br />
        <a href="#" class="link-mktg f3-mktg mr-4">Large link</a>
        <a href="#" class="link-mktg f4-mktg">Small link</a>
        
        <br /><br /><h5>Link with Emphasis :</h5><br />
        <a href="#" class="link-mktg link-emphasis-mktg f3-mktg">
          Underlined link
          </a>
    
        <br /><br /><h5>Link - Colors :</h5><br />
        <a href="#" class="link-mktg f3-mktg 
            color-fg-success mr-4 ">Link 1</a>
        <a href="#" class="link-mktg f3-mktg 
            color-fg-accent mr-4">Link 2</a>
        <a href="#" class="link-mktg f3-mktg 
            color-fg-severe mr-4">Link 3</a>
        <a href="#" class="link-mktg f3-mktg 
            color-fg-done mr-4">Link 4</a>
        <a href="#" class="link-mktg f3-mktg 
            color-fg-sponsors mr-4">Link 5</a>
    </div>
</body>
 
</html>