Primer CSS Box
Last Updated :
05 Jul, 2022
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that 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 a highly reusable model.
A Box is a component that is used to create boxes of various shapes and sizes. In this article, we will learn various box component types.
Primer CSS Box Components:
- Box: This class is used to create a box.
- Box elements: This class is used to create a different box for the title, body, and footer. This functionality is provided to us by Box Elements.
- Box padding density: This class is used to change the padding density of the box elements.
- Blue box theme: This class is used to create the box with a blue border and blue header using the Box–blue class.
- Blue box header theme: This class is used to create the header with a blue border and blue background using Box-header–blue class.
- Box danger theme: This class is used to create the red border box using the Box–danger class.
- Row themes: The background color of each row in a box can be changed individually.
- Dashed border: Dashed Border is a series of short lines. It can be obtained by using the class border-dashed.
- Boxes with flash alerts: Flash Alerts are used to put the flash alerts below the box header and above the box body. We can have different colors of flash alerts and can be used with icons and buttons.
- Boxes with icons: They are used to add icons with the content in the box.
- Box headers with counters: It is used to create the box header with the counter using the Counter class.
- Form elements and buttons in boxes: To achieve different layouts with form elements and buttons in boxes, use utilities to achieve the layout.
Syntax:
<div class="Box Box--Component-Classes">
...
</div>
Example 1: The following code demonstrates the box component with blue box theme using box, box–blue, box-body,box-header–blue,box–danger,box–footer classes.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width = device-width,
initial-scale = 1">
<link rel="stylesheet" href=
<style>
body {
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Box elements with blue box header theme
</h3>
<h4>
Box elements with blue box header theme
</h4>
<br>
<div class="Box Box--blue">
<div class="Box-header Box-header--blue">
<h3 class="Box-title">
This is title in header class
</h3> </div>
<div class="Box-body"> This is body </div>
<div class="Box Box--danger">
<div class="Box-row">
This is box danger theme.
</div>
</div>
<div class="Box-footer">
This is footer
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Primer CSS Box Padding Density classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>
Primer CSS Box Padding Density
</h3>
<div class="Box Box--condensed">
<div class="Box-header">
<h4 class="Box-title">
This is Box--condensed element
</h4>
</div>
<div class="Box-row">
<img src=
</div>
<div class="Box-row">
A Computer Science portal for geeks
</div>
</div>
<div class="Box Box--spacious">
<div class="Box-header">
<h4 class="Box-title">
This is Box--spacious element
</h4>
</div>
<div class="Box-row">
GFG Body
</div>
<div class="Box-row">
<img src=
</div>
<div class="Box-row">
Portal for geeks
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 3: The following code demonstrates the box component using the border,border-dashed, flash, flash-full,flash-success and flash-error classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>
Primer CSS Box with Dashed border n Flash
</h3>
<br>
<div class="border border-dashed ">
GeeksforGeeks is a Computer Science Portal
</div>
<div class="flash flash-full flash-success">
<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 Success Flash alert
</span>
</div>
<div class="flash flash-full flash-error">
<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 Error Flash alert
</span>
</div>
</center>
</body>
</html>
|
Output:
Reference Link: https://primer.style/css/components/box#box
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...