Blaze UI Typography Hyper-links
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" >w3wiki</ 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" >w3wiki</ 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
Contact Us