Skip to content
Related Articles

Related Articles

Blaze UI Typography Hyper-links

Improve Article
Save Article
  • Last Updated : 20 Apr, 2022
Improve Article
Save Article

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=
</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=
</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>


Output:            

 

Reference: https://www.blazeui.com/components/typography


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!