Primer CSS Marketing Link sizes

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 Links sizes can be defined using the utility classes which come with the marketing link components. There are two sizes: large and small. A marketing link can be defined by applying the link-mktg class on the <a> tag.

Primer CSS Link sizes classes:

link-mktg f3-mktg: These classes are used to set the size of the link to large.
link-mktg f4-mktg: These classes are used to set the link size to small.

Syntax:

<a href="#" class="link-mktg f3-mktg">
    ...
</a>

Example 1: The below example shows the use of the above-mentioned classes to change the size of the link.

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"> 
    <title>Link Sizes - Primer CSS</title> 
    <link href= 
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css" 
         rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2 style="color:green">GeeksforGeeks</h2> 
        <strong>Link Sizes - Primer CSS</strong> 
    </div> 
      
    <div class="d-flex flex-items-center flex-column"> 
        <a href="#" class="link-mktg f3-mktg mt-3 mb-3"> 
           Large Link 
         </a> 
        <a href="#" class="mb-3">Default Link</a> 
        <a href="#" class="link-mktg f4-mktg mb-3"> 
           Small Link 
        </a> 
    </div> 
</body> 
</html>

Output:

Example 2: The below example shows the use of link size classes with different colors.

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"> 
    <title>Link Sizes - Primer CSS</title> 
    <link href= 
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css" 
         rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2 style="color:green">GeeksforGeeks</h2> 
        <strong>Link Sizes with Different Colors - Primer CSS</strong> 
    </div> 
      
    <div class="d-flex flex-items-center flex-column"> 
        <a href="#" class="link-mktg f3-mktg mt-3 mb-3 color-fg-success"> 
           Large Link with Success Color 
        </a> 
        <a href="#" class="link-mktg f3-mktg mb-3 color-fg-done"> 
           Large Link with Done Color 
        </a> 
        <a href="#" class="mb-3 color-fg-danger"> 
           Default Link with Danger Color 
        </a> 
        <a href="#" class="link-mktg f4-mktg mb-3 color-fg-accent"> 
           Small Link with Accent Color 
        </a> 
    </div> 
</body> 
</html>