Skip to content
Related Articles

Related Articles

Primer CSS Marketing Links

Improve Article
Save Article
  • Last Updated : 10 May, 2022
Improve Article
Save Article

 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=
    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>


Output:

Marketing Links

Reference: https://primer.style/css/components/marketing-links


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!