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">neveropen</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">neveropen</h1> <p class="bp4-monospace-text bp4-text-disabled"> 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:
Reference: https://blueprintjs.com/docs/#core/typography.ui-text
