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

Primer CSS Blue Box Theme Class:

Box–blue: This class is used to create a box with a blue border and a blue header.

Syntax:

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

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Blue Box 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 Theme </h3> 
    </div> <br> <br> 
  
    <div class="Box Box--blue"> 
        <div class="Box-header"> 
            GeeksforGeeks Blue Box Theme 
        </div>  
    </div> 
</body> 
  
</html>

Output:

Primer CSS Blue Box Theme

Example 2: The following code demonstrates the Primer CSS Blue Box Theme with header and body content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Blue Box 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 Theme </h3> 
    </div> <br> <br> 
  
    <div class="Box Box--blue"> 
        <div class="Box-header"> 
            GeeksforGeeks Blue Box Theme 
        </div>  
        <div class="Box-row"> 
            GFG Blue box 
        </div> 
        <div class="Box-row"> 
            GFG Blue box 
        </div> 
        <div class="Box-row"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > 
        </div> 
    </div> 
</body> 
  
</html>