Blaze UI Typography Keys on a keyboard

Last Updated : 01 Jun, 2022

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=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
    <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=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
    <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>