Blaze UI Typography Hyper-links

Last Updated : 20 Apr, 2022

Blaze UI is an open-source CSS-based UI library that provides a great structure for building websites quickly with a scalable and maintainable foundation.

In this article, we will learn about Blazer UI Typography Hyper-links. Blazer UI Typography Hyper-links are used to provide some styling to hyperlinks i.e providing different colors to the links.

Blazer UI Typography Hyper-links Classes:

c-link: This is a default class, which provides blue color to the hyperlinks.
c-link–brand: This class provides black color to the hyperlinks.
c-link–info: This class provides blue color to the hyperlinks.
c-link–warning: This class provides yellow color to the hyperlinks.
c-link–error: This class provides red color to the hyperlinks.
c-link–success: This class provides green color to the hyperlinks.

Syntax:

<a href="#" class="c-link c-link--brand">....</a>

Note: Use the above syntax replacing any above-mentioned classes as per the need.

Example 1: In this example, we will learn about c-link, c-link–brand, and c-link–warning classes.

HTML

<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3> Blaze UI Typography Hyperlinks</h3> 
    <a href="#" class="c-link">I am c-link</a><br /> 
    <a href="#" class="c-link c-link--brand">I am brand</a><br /> 
    <a href="#" class="c-link c-link--warning">I am warning</a><br /> 
</body> 
</html>

Output:

Example 2: In this example, we will learn about the c-link–info, c-link–error, and c-link–success classes.

HTML

<html> 
  
<head> 
    <link rel="stylesheet" href= 
  "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3> Blaze UI Typography Hyperlinks</h3> 
    <a href="#" class="c-link c-link--info">I am Info</a><br /> 
    <a href="#" class="c-link c-link--success">I am Success</a><br /> 
    <a href="#" class="c-link c-link--error">I am Error</a><br /> 
</body> 
</html>