Primer CSS Box Elements

Last Updated : 19 Apr, 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach ensures that our styles are consistent and interoperable with each other. It features a highly composable spacing scale, customizable typography, and meaningful colors. It is highly reusable and flexible and is created with GitHub’s design system.

A Box is a component that is used to create boxes of various shapes and sizes. There are situations when we need a different box for the title, body, and footer. This functionality is provided to us by the Primer CSS and it is known as the Box Elements.

Primer CSS Box Elements Classes:

Box-header: This class is used to create a box for the header region.
Box-title: This class is used to apply a bold font-weight to the heading.
Box-body: This class is used to create a box for the body region.
Box-footer: This class is used to create a box for the footer region.

Syntax:

<div class="Box">
      <div class="Box-header">
         <h2 class="Box-title">
             ...
         </h2>    
      </div>
      <div class="Box-body">
        ...
      </div>
      <div class="Box-footer">
        ...
      </div>
</div>

The syntax for the other classes is the same except for the name of the class which will change.

Example 1: The following example demonstrates the use of the Primer CSS Box elements using the Box-header and the Box-title classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Box Elements </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> Primer CSS Box Elements </h3> 
  
    <div class="Box"> 
        <!--Box Class-->
        <div class="Box-header"> 
            <!--Header Class-->
            <h3 class="Box-title"> 
                <!--Title Class-->
                This Is A Box-header 
            </h3> 
        </div> 
        <div class="Box-header"> 
            <h3 class="Box-title"> 
                This Is Another Box-header 
            </h3> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: The following example demonstrates the use of the Primer CSS Box elements using all the above-mentioned classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Box Elements </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> Primer CSS Box Elements </h3> 
      
    <br> 
    <div class="Box"> 
        <!--Box Class-->
        <div class="Box-header"> 
            <!--Header Class-->
            <h3 class="Box-title"> 
                <!--Title Class-->
                This Is A Box-header 
            </h3> 
        </div> 
        <div class="Box-body"> 
            <!--Body Class-->
            This Is A Box-body 
        </div> 
        <div class="Box-footer"> 
            <!--Footer Class-->
            This Is A Box-footer 
        </div> 
    </div> 
</body> 
  
</html>