Primer CSS Secondary Link
Last Updated :
05 May, 2022
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 Secondary Links.
Primer CSS Secondary Links is used to perform 2 tasks. Firstly it provides a greyish color to the text (when you are not hovering). Secondly, it will turn the color of the text to blue, when you hover on it.
Primer CSS Secondary Link class used:
- Link--secondary: It provides a greyish color to the text ( when you are not hovering ) and turns the color of the text to blue when you hover on it.
Syntax:
<a class="Link--secondary" href="#">
...
</a>
Example 1: In this example, we will learn about Link--secondary. Notice link color also before hovering also.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Primer CSS Links Secondary</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/[email protected]/dist/primer.css">
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Primer CSS Links Secondary</h3>
<p style="color:red">
Please notice Link Color
also when not hovering
</p>
<p>
To go to GeeksforGeeks
<a href="https://www.geeksforgeeks.org"
class="Link--secondary">
Click Me
</a>
</p>
</body>
</html>
Output:
Example 2: In this example, we will use Link--secondary under the heading tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Primer CSS Links Secondary</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/[email protected]/dist/primer.css">
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Primer CSS Links Secondary</h3>
<p style="color:red">
Please notice Link Color
also when not hovering.
</p>
<h2>To go to GeeksforGeeks
<a href="https://www.geeksforgeeks.org"
class="Link--secondary">Click Me</a>
</h2>
</body>
</html>
Output:
Reference: https://primer.style/css/components/links#secondary-link
Similar Reads
Primer CSS Links Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and colour. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Links are used to decorate links in the
3 min read
Primer CSS Primary 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 Toast with Link The Primer CSS Toast element is used to show important messages to the user to enhance the user experience. In this article, we will be discussing Primer CSS Toast with Link. By including a link in the toast, we can allow users to take necessary actions in response to the toast message. To include a
2 min read
CSS :link Selector The :link is used to target the unvisited link for styling not the links which is already visited. For styling on visited use ":visited", for styling on click use ":active" and for styling move mouse on link use ":hover".Syntax::link { //property}Example: HTML<!DOCTYPE html> <html> <h
1 min read
Primer CSS Muted 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