Thursday, December 5, 2024
Google search engine
HomeLanguagesReact.js Blueprint Typography Running text

React.js Blueprint Typography Running 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 Running 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. Running text is used to add long-form text, such as rendered Markdown documents as it provides increased spacing and support for unclassed textual elements.

React.js BluePrint Typography UI text class:

  • .bp4-running-text: This class is used to add a long form of text and provides increased spacing in the texts.

Syntax:

<div class="bp4-running-text">
    <p>...<p>
    <h1>...</h1>
</div>

 

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:

 

Example 1: Below example demonstrates the usage of running text in <h1> tag and <p> tags of typography.

Javascript




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 Running Text
            </h1>
            <div class="bp4-running-text" 
                style={{ color: "black" }}>
                <h1 >Welcome to neveropen</h1>
                <p class="bp4-text-large">neveropen
                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:

 

Example 2: Below example demonstrates the usage of running text in lists of typography.

Javascript




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 Running Text
            </h1>
            <div class="bp4-running-text" 
                style={{ color: "black" }}>
                <h3>neveropen Courses</h3>
                <ol>
                    <li>DSA Course</li>
                    <li>C++ Self-Paced Course</li>
                    <li>Java Self-Paced Course</li>
                </ol>
            </div>
        </div>
    );
}
  
export default App;


Output:

 

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments