Primer CSS Boxes with Icons
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 Boxes with Icons are used to add icons with the content in the box. We use Box-btn-octicon and btn-octicon classes to have the same padding as other box elements. In this article, we will discuss the Primer CSS Boxes with Icons.
Primer CSS Boxes with Icons Classes:
- Box-btn-octicon: This class is used to create the icon button.
- octicon: This class is used to create the octicon.
Syntax:
<div class="Box">
<div class="Box-body">
<span class="pr-2"> ... </span>
<button href="#" class="Box-btn-octicon
btn-octicon">
...
</button>
</div>
</div>
Example 1: The following code demonstrates the Primer CSS Boxes with Icons.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Boxes with Icons </title>
<link rel="stylesheet" href=
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Boxes with Icons </h3>
</div> <br> <br>
<div class="Box">
<div class="Box-header">
<span class="Box-title">
GeeksforGeeks
</span>
<button href="#" class="Box-btn-octicon btn-octicon">
<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>
</button>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS Boxes with Icons
Example 2: The following code demonstrates the Primer CSS Boxes with Icons.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Boxes with Icons </title>
<link rel="stylesheet" href=
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Boxes with Icons </h3>
</div> <br> <br>
<div class="Box">
<div class="Box-header">
<button href="#" class="Box-btn-octicon btn-octicon">
<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>
</button>
<span class="Box-title">
GeeksforGeeks
</span>
</div>
<div class="Box-body">
<img src=
<button href="#"
class="Box-btn-octicon btn-octicon float-right">
<svg class="octicon octicon-x" viewBox="0 0 12 16"
width="12" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.48 8l3.75 3.75-1.48 1.48L6
9.48l-3.75 3.75-1.48-1.48L4.52
8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75
1.48 1.48L7.48 8z" >
</path>
</svg>
</button>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS Boxes with Icons
Reference: https://primer.style/css/components/box#boxes-with-icons
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...