Open In App

Primer CSS Marketing Link with Emphasis

Improve
Improve
Like Article
Like
Save
Share
Report

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 offers Marketing links that are produced by taking the basic class .link-mktg along with a set of modifier classes to handle the color and size. Link with emphasis can be made by adding the .link-emphasis-mktg class to the link to get a pale underline along with the fill-up when the hover event is triggered.

Primer CSS Links with Emphasis classes:

  • link-emphasis-mktg: This class is used to create a link with a pale underline that will fill up on hover.

Syntax:

<a href="#" class="link-mktg arrow-target-mktg 
    link-emphasis-mktg text-semibold f3-mktg">
    ...
</a>

Example 1: This example demonstrates the use of Primer CSS Links with Emphasis.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Primer CSS Link with Emphasis
    </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="color-fg-open">GeeksforGeeks</h1>
        <h4>Primer CSS Link with Emphasis</h4>
  
        <a href="#" class="link-mktg arrow-target-mktg 
        link-emphasis-mktg text-semibold f3-mktg mt-3">
            Write an Article
            <svg width="16" height="16" fill="currentColor" 
                class="bi bi-pen" viewBox="0 0 16 16">
                <path d="m13.498.795.149-.149a1.207 1.207 0 
            1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 
            2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 
            0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 
            0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 
            1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001zm-.644.766a.5.5 
            0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 
            0 0 0 0-.708l-1.585-1.585z" />
            </svg>
        </a>
    </center>
</body>
  
</html>


Output:

Primer CSS Links with Emphasis

Example 2: This is another example that illustrates the use of Primer CSS Links with Emphasis.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Primer CSS Link with Emphasis
    </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="color-fg-open">
            GeeksforGeeks
        </h1>
          
        <h4>Primer CSS Link with Emphasis</h4>
  
        <a href="#" class="link-mktg arrow-target-mktg 
            link-emphasis-mktg text-semibold f3-mktg mt-3">
            Pick Article to Write
            <svg width="16" height="16" fill="currentColor" 
                class="bi bi-bookmark-check-fill" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M2 15.5V2a2 2 0 0 1 2-2h8a2 
            2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 
            0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 
            6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z" />
            </svg>
        </a>
    </center>
</body>
  
</html>


Output:

Primer CSS Links with Emphasis

Reference: https://primer.style/css/components/marketing-links#link-with-emphasis



Last Updated : 10 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads