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.
In this article, we will learn about Primer CSS Branch Name. Primer CSS Branch Name is used to provide a background color to any text/link. It is mainly used to provide branch names to an independent branch of the repository/project.
Branch name Used Class:
- branch-name: This is used to provide a background color to any text/link.
Syntax:
<a href="#url" class="branch-name"> Text/Branch Name </a>
Example 1: In this example, we will create two branch names with 2 buttons.
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Primer CSS Branch Name</h3>
<a href="#" class="branch-name">
GeeksforGeeks Master Branch
</a>
<a href="#" class="branch-name">
GeeksforGeeks Demo Branch
</a>
<br><br>
<button class="btn btn-primary">
Merge Code
</button>
<button class="btn btn-danger">
Discard Changes
</button>
</body>
</html>
|
Output:
Example 2: In this example, we use CSS icons along with some text, to create a branch name.
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Primer CSS Branch Name</h3>
<a href="#" class="branch-name">
<i class="glyphicon glyphicon-music"></i>
GeeksforGeeks Music Library
</a>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components/branch-name