Primer CSS Header-Item Last Updated : 19 Apr, 2022 Comments Improve Suggest changes Like Article Like 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 Header is used to make a header with vertically aligned items and horizontal spacing. Primer CSS Header-Item is used to create the header item using the Header-item class. In this article, we will discuss the Primer CSS Header-Item. Primer CSS Header-Item Class: Header-item: This class is used to create the header item. Syntax: <div class="Header"> <div class="Header-item"> ... </div> </div> Example 1: The following code demonstrates the Primer CSS Header-Item with some items. HTML <!DOCTYPE html> <html> <head> <title> Primer CSS Header-Item </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 Header-Item </h3> </div> <br> <br> <div class="Header"> <div class="Header-item"> GFG Item 1 </div> <div class="Header-item"> GFG Item 2 </div> <div class="Header-item"> GFG Item 3 </div> <div class="Header-item"> GFG Item 4 </div> </div> </body> </html> Output: Primer CSS Header-Item with some items Example 2: The following code demonstrates the Primer CSS Header-Item with some items and a search box. HTML <!DOCTYPE html> <html> <head> <title> Primer CSS Header-Item </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 Header-Item </h3> </div> <br> <br> <div class="Header"> <div class="Header-item"> GFG Item 1 </div> <div class="Header-item"> GFG Item 2 </div> <div class="Header-item Header-item--full"> GFG Item 3 </div> <div class="Header-item"> <input class="form-control Header-input" type="text" /> </div> <div class="Header-item"> Search </div> </div> </body> </html> Output: Primer CSS Header-Item with some items and a search box Reference: https://primer.style/css/components/header#header-item Comment More infoAdvertise with us Next Article Primer CSS Header-Item singh_teekam Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Component Similar Reads Primer CSS Header Primer CSS is a free open-source CSS framework that is built upon a 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 our patterns are stead 3 min read Primer CSS Header-Link 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 2 min read Primer CSS Select Menu Header 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 2 min read Primer CSS Padding Padding is used to create space around the element, inside any defined border. We can set different padding for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.Primer CSS Padding:Shorthand: Padding has many variations, that can be 3 min read Primer CSS Labels 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 3 min read Primer CSS Navigation Primer CSS is a free open-source CSS framework that is formed upon systems that establish the foundation of the basic style elements such as spacing, typography, and color. This systematic structure ensures our patterns are stable and interoperable with every other. Its approach to CSS is inspired b 6 min read Primer CSS Flexbox Align Items 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. Primer CSS Flexbox Align Items used t 3 min read Primer CSS Pagination 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 2 min read Primer CSS Heading Utilities 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 2 min read Primer CSS Property order 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. Primer CSS Property Order is an impor 2 min read Like