React.js Blueprint Typography UI text

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Typography UI text. Typography is used to add text in various different ways to design a web page. The React.js Blueprint provides different types of typography that can be used while developing a web application. UI text is used to reset some element font size and line height to the default base styles.

React.js BluePrint Typography UI text class:

• .bp4-ui-text: This class provides the default text styles like default sans-serif operating system font, or default 14px size in texts other than headings supported by Blueprint.

Syntax:

<h1 class="bp4-heading">...</h1>
    ...
<p class="bp4-ui-text">...<p>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure: The project structure should look like the below:

Example 1: Below example demonstrates the basic usage of .bp4-ui-text class in typography.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <div style={{
            padding: 20, textAlign: "center",
            color: "green"
        }}>
            <h1>ReactJS Blueprint Typography UI Text</h1>
            <div style={{ color: "black" }}>
                <h1 class="bp4-ui-text">GeeksforGeeks</h1>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of different .bp4-monospace-text and .bp4-text-disabled  in typography.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <div style={{
            padding: 20, textAlign: "center",
            color: "green"
        }}>
            <h1>ReactJS Blueprint Typography UI Text</h1>
            <div style={{ color: "black" }}>
                <h1 class="bp4-ui-text">GeeksforGeeks</h1>
                <p class="bp4-monospace-text bp4-text-disabled">
                    GeeksforGeeks is a platform where you can
                    find technical articles and tutorials.
                    It also provides a variety of coding problems
                    and contests to learn with.
                </p>
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/typography.ui-text