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 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.
In this article, we will learn about the Header component of the Primer CSS. One such component of the Primer CSS is the Header component. The header component as the name suggests helps us to create a header for our website. Now, what is a header? A header is a component that has all the items vertically aligned. In Primer CSS, we can create a header by adding the “.header” class to the element, and also we can create the items by adding the “.header-item” class to the element.
Primer CSS Header Components:
- Header: The Header is added to the parent container of the header element. It wraps all the items to be vertically aligned and gives the header a black background.
- Header-item: The Header-item is added to all the child components inside the Header. This makes the header items vertically aligned to each other and also give them some default margin to make them look beautiful.
- Header-item–full: The Header-item–full class when added to a particular item makes it stretched to occupy the entire available space and pushes all the remaining items to the right side.
- Header-link: The Header-link is added to the anchor tags inside the header. It makes the link text to be white, and bold and gives them a 70% hover opacity when they have hovered over.
Syntax:
<div class="Header">
<div class="Header-item">
...
</div>
<div class="Header-item">
...
</div>
...
</div>Example 1: We have created a simple header with text and input fields.
<!DOCTYPE html><html>
<head>
<title> Primer CSS Toast animation in </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
<body>
<div class="Header">
<!-- Text item -->
<div class="Header-item">
GeeksforGeeks
</div>
<div class="Header-item">
Articles
</div>
<div class="Header-item">
Practice QS
</div>
<!-- Form item -->
<div class="Header-item">
<input class="form-control Header-input"
type="text"/>
</div>
<!-- Image item -->
<div class="Header-item">
<img class="avatar" height="20"
alt="@octocat"
width="20">
</div>
</div>
<div>
<h2>GeeksforGeeks</h2>
<h3>Primer CSS Header </h3>
</div>
</body>
</html>
|
Output:
Example 2: We have created a header with hyperlinks to the items.
<!DOCTYPE html><html>
<head>
<title> Primer CSS Toast animation in </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/>
</head>
<body>
<div class="Header">
<!-- Text item -->
<div class="Header-item">
<a href="#" class="Header-link">
GeeksforGeeks
</a>
</div>
<div class="Header-item">
<a href="/articles.html" class="Header-link">
Articles
</a>
</div>
<div class="Header-item">
<a href="/DSA.html" class="Header-link">
DSA Q/s
</a>
</div>
<!-- Form item -->
<div class="Header-item--full">
<input class="form-control Header-input"
type="text"/>
</div>
<!-- Image item -->
<div class="Header-item">
<img class="avatar" height="20" alt="@octocat"
width="20">
</div>
</div>
<div>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components/header