Blaze UI Typography Keys on a keyboard
Blaze UI is a free & open-source Framework with a lightweight UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
In this article, we are going to learn about the Typography keys on a keyboard using Blaze UI.
Typography: Blaze UI framework comes bundled with a nice typography module that covers different text visualizations.
Keys on a keyboard: When you want to describe what keys to press usually as part of support documentation it’s preferred to use the keyboard class.
Classes used:
- u-kbd: This class is used to provide keys on a keyboard interface. In simple words, elements will look like keys on the keyboard.
Syntax:
<kbd class="u-kbd"></kbd>
Example 1: In the following example we will see how we can use Keys on a 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= <title>Blaze UI Keys on a keyboard</title></head><body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Blaze UI Keys on a keyboard</h3> <kbd class="u-kbd">GeeksforGeeks</kbd> </center></body></html> |
Output:
Example 2:
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= <title>Blaze UI Keys on a keyboard</title> <style> body{ background-color:lightgrey; color:black; } </style> </head><body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Blaze UI Keys on a keyboard</h3> <kbd class="u-kbd">GeeksforGeeks</kbd> <br><br> <kbd class="u-kbd">1</kbd> <kbd class="u-kbd">2</kbd> <kbd class="u-kbd">3</kbd> <kbd class="u-kbd">4</kbd> <kbd class="u-kbd">5</kbd> <kbd class="u-kbd">6</kbd> <kbd class="u-kbd">7</kbd> <kbd class="u-kbd">8</kbd> <kbd class="u-kbd">9</kbd> <kbd class="u-kbd">10</kbd> </center></body></html> |
Output:
Reference: https://www.blazeui.com/components/typography/
Please Login to comment...