Open In App

Primer CSS Typography Heading Utilities

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.

In this article, we will learn about Typography Heading Utilities. Just like in HTML, we use <h1> to <h6> tags to create headings, we have heading utilities in Primer CSS to create headings. In Primer CSS, we use .h1 – .h6 to change an element’s font size and weight to match our heading styles.

Class:

  • h*: The classes vary from h1 to h6 depending on the required font size.

Syntax:

<p class=" h* "> 
    Content
</p>

* can be substituted with numbers from 1 to 6 based upon need.

Example 1: In this example, we will learn about classes h1, h2, and h3.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
  
<body>
    <div>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3> Heading Utility</h3>
    </div>
    <p class="h1"> I am h1 class</p>
  
    <p class="h2"> I am h2 class</p>
  
    <p class="h3">I am h3 class </p>
  
</body>
</html>


Output:

 

Example 2: In this example, we will learn about classes h4, h5, and h6.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
  
<body>
    <div>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3> Heading Utility</h3>
    </div
    <p class="h4">I am h4 class</p>
  
    <p class="h5">I am h5 class</p>
  
    <p class="h6">I am h6 class</p>
  
</body>
</html>


Output:

 

Reference: https://primer.style/css/utilities/typography#heading-utilities



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