Open In App

Primer CSS Boxes with Icons

Last Updated : 19 Apr, 2022
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 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=
"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 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=
"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 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



Similar Reads

Why does password boxes are smaller than text boxes in IE ?
According to Microsoft, whenever Internet Explorer provides the HTML page structure, it uses the wrong character set even after providing the correct character set by the META tag. HTML part of user input: The following HTML code shows the general password input form which works fine in Google Chrome, Firefox, Microsoft Edge but not in IE. The widt
2 min read
Primer CSS Boxes with Flash Alerts
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, an
3 min read
Primer CSS Button 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, an
3 min read
How to remove outline around text input boxes in chrome using CSS?
Generally in the case of Google Chrome Browser, when the input field gets focus then the blue outline occurred on the border of the Input fields. The Task can be done by using the CSS outline property. Example: C/C++ Code &lt;html&gt; &lt;head&gt; &lt;title&gt; How to remove outline around text input boxes in chrome using CSS? &lt;/title&gt; &lt;st
1 min read
How to create three boxes in the same div using HTML and CSS ?
We can place three or more different divs side by side in the same div using CSS. You can achieve this using Flexbox, but you need to use wrapper divs and apply different flex directions to each of them to make the grid layout work. You can set the height and width of the div by using CSS properties. Syntax:flex: flex-grow flex-shrink flex-basis |
3 min read
How to Add Shadow Effect on Hover to DIV Boxes in CSS ?
Adding a shadow effect on hover to DIV boxes is a popular technique to enhance the visual appeal and interactivity of a website. In this article, we will explore two different methods to achieve this effect using CSS. Table of Content Using box-shadow PropertyUsing filter Property with drop-shadowAdd Shadow Effect on Hover to DIV Box using box-shad
2 min read
Using Primer CSS - A Simple and Transparent CSS Library for Web Development
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS helps you to control the layout and appearance of web pages. In this article, we will discuss the concept of Primer CSS, a CSS library that provides a simple and easy-to-use set of styles for web development. Obvious an
3 min read
Materialize CSS Icons
Materialize CSS provides a rich set of material icons of google which can be downloaded from Material Design specs. Icon libraries that are supported by materialize css are Google Material Icons, Font Awesome Icons and Bootstrap Icons. Different icons can be selected from Material Icons. Library and Usage: To use these icon, the following line is a
2 min read
How to use buttons with icons using Pure CSS?
Incorporating icon fonts with Pure buttons is a simple task using Pure CSS. Since Pure CSS does not come with its own icon pack, we are using icon fonts from Font Awesome. Before creating buttons with icons first we must include the pure.css file into our HTML file directly from CDN. Then link the Font Awesome CSS files to your page. Example 1: The
2 min read
Pure CSS Icons
In this article, we will learn how to use icons in Pure CSS &amp; will understand its implementation through examples. Pure CSS does not have any icon component, there are so many icon packages available that can be used in Pure CSS. In all of those icon packages, there are 3 most and easy use icons packages that are described below: Font Awesome I
3 min read