Skip to content
Related Articles

Related Articles

Primer CSS Marketing Typography

View Discussion
Improve Article
Save Article
  • Last Updated : 11 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 Marketing Typography is used for marketing pages and it has utilities like heading utilities, body content utilities, etc. 

In this article, we will discuss Typography Utilities in Primer CSS.

Primer CSS Marketing Typography Utilities:

  • Heading utilities: These utilities are used to change the font, size, and weight using heading utility classes.
  • Body content utilities: These utilities are used to change the font size, and font-weight of the element’s body on the marketing pages. 
  • Typographic utilities: These utilities are used as additional utilities.

Primer CSS Marketing Typography Heading utility classes:

  • h*-mktg: The classes vary from h0 to h6 to change the font size and weight.

Primer CSS Marketing Typography Body Content utility classes:

  • f*-mktg: The classes vary from f0 to f6 to change the font size and weight.

Primer CSS Marketing Typography Typographic utility classes:

  • pullquote: This class is used to create the pullquote.

Syntax:

<p class="Marketing-Typography-Class">
    ...
</p>

Example 1: This example demonstrates the implementation of Primer CSS Marketing Typography Heading Utilities.

HTML




<!DOCTYPE html>
<html>
      
<head>
    <title> Primer CSS Marketing Typography</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
  
<body class="m-2">
    <div class="text-center">
        <h1 class="color-fg-success"
            GeeksforGeeks 
        </h1>
        <h3
            Primer CSS Marketing Typography 
              Heading Utilities 
        </h3> <br>
          
        <p class="h0-mktg">
            GeeksforGeeks 0
        </p>
  
  
        <p class="h1-mktg">
            GeeksforGeeks 1
        </p>
  
  
        <p class="h2-mktg">
            GeeksforGeeks 2
        </p>
  
  
        <p class="h3-mktg">
            GeeksforGeeks 3
        </p>
  
    
        <p class="h4-mktg">
            GeeksforGeeks 4
        </p>
  
    
        <p class="h5-mktg">
            GeeksforGeeks 5
        </p>
  
    
        <p class="h6-mktg">
            GeeksforGeeks 6
        </p>
  
    </div>
</body>
  
</html>


Output:

 

Example 2: This example demonstrates the implementation of Primer CSS Marketing Typography Body Content Utilities.

HTML




<!DOCTYPE html>
<html>
      
<head>
    <title> Primer CSS Marketing Typography </title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
  
<body class="m-2">
    <div class="text-center">
        <h1 class="color-fg-success"
            GeeksforGeeks 
        </h1>
        <h3
            Primer CSS Marketing Typography 
            Body Content Utilities
        </h3> <br>
          
        <p class="f0-mktg mb-3">
            A Computer Science portal for geeks. 
        </p>
  
    
        <p class="f1-mktg mb-3">
            It contains well written, well thought
            and well explained computer science and
            programming articles.
        </p>
  
    
        <p class="f2-mktg">
            A Computer Science portal for geeks.
        </p>
  
  
        <p class="f3-mktg mb-3">
            A Computer Science portal for geeks. 
        </p>
  
    
        <p class="f4-mktg mb-3">
            It contains well written, well thought
            and well explained computer science and
            programming articles.
        </p>
  
    
        <p class="f5-mktg">
            A Computer Science portal for geeks.
        </p>
  
    
        <p class="f6-mktg">
            It contains well written, well thought
            and well explained computer science and
            programming articles.
        </p>
  
    </div>
</body>
  
</html>


Output:

 

Example 3: This example demonstrates the implementation of Primer CSS Marketing Typography Typographic utilities.

HTML




<!DOCTYPE html>
<html>
      
<head>
    <title> Primer CSS Marketing Typography </title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
  
<body class="m-2">
    <div class="text-center">
        <h1 class="color-fg-success"
            GeeksforGeeks 
        </h1>
        <h3
            Primer CSS Marketing Typography 
            Typographic utilities
        </h3> <br>
          
        <p class="pullquote">
            A Computer Science portal for geeks. 
            It contains well written, well thought
            and well explained computer science and
            programming articles.
        </p>
  
    </div>
</body>
  
</html>


Output:

 

Reference: https://primer.style/css/utilities/marketing-type


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!