Open In App

Primer CSS Box Danger Theme

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.

Primer CSS Box is used to display the content in the simple rounded corner box. Primer CSS Box Danger Theme is used to create the red border box using the Box–danger class. It will only be applied to Box-row and Box-body. In this article, we will discuss Primer CSS Box Danger Theme.

Primer CSS Box Danger Theme Class:

  • Box–danger: This class is used to create the red-bordered box.

Syntax:

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

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

HTML




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


Output:

Primer CSS Box Danger Theme

Example 2: The following code demonstrates the Primer CSS Box Danger Theme.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Box Danger 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 Box Danger Theme </h3>
    </div> <br> <br>
  
    <div class="Box Box--danger">
        <div class="Box-row">
            GeeksforGeeks Danger Theme
        </div>
        <div class="Box-row">
            <img src=
        </div>
    </div> <br> <br>
  
    <div class="Box Box--danger">
        <div class="Box-body">
            GFG Body danger
        </div>
    </div>
</body>
  
</html>


Output:

Primer CSS Box Danger Theme

Reference: https://primer.style/css/components/box#box-danger-theme



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