Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.
Blaze UI Typography contains a lot of typography modules that allow you to modify or style the text easily. The typography contains styles for paragraphs, links, headings, code and much more.
Blaze UI Typography:
- Paragraphs: If you want to style your paragraphs, use the paragraph class.
- Hyper-links: The .c-link class is used to make text look like a hyperlink or to use Blaze’s consistent styles for hyperlinks.
- Gradient text: This applies a gradient to the text and we can customize the color using the different colors.
- Highlighting text: This is used to highlight a text.
- Emphasising: This is used to emphasize more on the text.
- Abbreviations: This is used for accessibility and uses a tooltip to make the content more accessible.
- Monospaced: This is used to make the text of the mono font family.
- Keys on a keyboard: This is useful to show keyboard buttons with text on the webpage.
- Inline and Multiline code: The .u-code class can be used to highlight code within a page. The default is inline, however, the .u-code–multiline modification can be used to display multi-line snippets.
- Blockquote: This is used to format a section as a blockquote.
Syntax: Use the following syntax to create a paragraph in blaze UI.
<p class="c-paragraph">
...
</p>Example 1: In the following example, we have a paragraph and code section.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container"
style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Typography</strong>
<br/><br/>
<p class="c-paragraph">
Welcome to GeeksforGeeks.
The following code shows to add two numbers
and print them in Python3 language.
</p>
</center>
<code class="u-code u-code--multiline">
print("5+3 =",5+3)
</code>
</div>
</body>
</html>
|
Output:
Example 2: In the following example, we have a blockquote and a gradient text.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container"
style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Typography</strong>
<br /><br />
<p class="u-blockquote u-blockquote--warning">
Welcome to GeeksforGeeks.
</p>
<div class="u-gradient-text u-gradient-text--success">
A computer science portal for geeks.
</div>
</center>
</div>
</body>
</html>
|
Output:
Example 3: In the following example, we have hyperlinks and highlighted text.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Typography</strong>
<br /><br />
</center>
<div>
<h3>Links</h3>
<ul>
<li>
<a href="#"
class="c-link">
Data Structures
</a>
</li>
<li><a href="#"
class="c-link c-link--brand">
Algorithms
</a></li>
<li><a href="#"
class="c-link c-link--success">
Web Development
</a></li>
</ul>
<p class="u-text--highlight">
A computer science portal for geeks.
</p>
</div>
</div>
</body>
</html>
|
Output:
Example 4: In the following example, we have emphasised text, abbreviations, monospaced and keys on the keyboard.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</script>
</head>
<body>
<div class="o-container"
style="padding:1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Typography</strong>
<br /><br />
</center>
<div>
<h3>Emphasising</h3>
<p class="u-text--quiet">
Welcome to GeeksforGeeks
</p>
<p class="u-text--loud">
A computer science portal for geeks.
</p>
<h3>Abbreviations</h3>
<abbr class="u-text--help"
title="Data Structures and Algorithms">
DSA
</abbr>
<h3>Monospaced</h3>
<span class="u-text--mono">
There are lots of tutorials on Data
Structures, Algorithms, and many
more.
</span>
<h3>Keyboard</h3>
<span>
<kbd class="u-kbd">ctrl+c</kbd>
Keyboard shortcut is used to copy in PC
</span>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/typography/