Primer CSS Boxes with Icons

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.

Output:

👁 Image

Example 2: The following code demonstrates the Primer CSS Boxes with Icons.

Output:

👁 Image

Reference: https://primer.style/#boxes-with-icons