Primer CSS Blue Box Header Theme

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. 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 Box is used to display the content in the simple rounded corner box. Primer CSS Blue Box Header Theme is used to create the header with a blue border and blue background using Box-header–blue class. In this article, we will discuss Primer CSS Blue Box Header Theme.

Primer CSS Blue Box Header Theme Class:

Box-header–blue: This class is used to change the header border color and background color to blue.

Syntax:

<div class="Box">
  <div class="Box-header Box-header--blue">
     ...
  </div>
</div>

Example 1: The following code demonstrates the Primer CSS Blue Box Header Theme.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS Blue Box Header Theme </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
      <h1 class="color-fg-success"> GeeksforGeeks </h1> 
      <h3> Primer CSS Blue Box Header Theme </h3> 
    </div><br><br> 
  
    <div class="Box"> 
      <div class="Box-header Box-header--blue"> 
        <h4 class="Box-title"> 
          GeeksforGeeks Blue header 
        </h4> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Blue Box Header Theme

Example 2: The following code demonstrates the Primer CSS Blue Box Header Theme with Icon and Box-body.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS Blue Box Header Theme </title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
      <h1 class="color-fg-success"> GeeksforGeeks </h1> 
      <h3> Primer CSS Blue Box Header Theme </h3> 
    </div> <br> <br> 
  
    <div class="Box"> 
        <div class="Box-header Box-header--blue"> 
            <svg class="octicon" viewBox="0 0 14 16" 
               width="18" height="20" > 
              <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25  
                  7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0  
                  011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"> 
              </path> 
            </svg> 
            <span> GeeksforGeeks Blue header </span> 
        </div> 
          
        <div class="Box-body"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > 
        </div> 
    </div> 
</body> 
  
</html>