React.js Blueprint Typography

Last Updated : 15 Sep, 2022

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. 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.

React.js BluePrint Typography Types:

UI text: This type of typography is used to reset some element’s font size and line height to the default base styles.
Running Text: This type of typography is used to add long-form texts.
Headings: This type of typography is used to add headings from h1 to h6.
Links: This type of typography is used to add an external link with the help of href attribute.
Preformatted Texts: This type of typography is used to add inline code elements types of texts.
Block quotes: This type of typography is used to add quotes on the web page.
Lists: This type of typography is used to add different types of lists on the web page.
Internationalization: This type of typography is used to add international strings or foreign languages.
Dark theme: This type of typography is used to add dark and light themes to the UI color.

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:

Example 1: Below example demonstrates the usage of headings in 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</h1> 
            <div style={{ color: 'black' }}> 
                <h1 class="bp4-heading">GeeksforGeeks</h1> 
                <h2 class="bp4-heading">GeeksforGeeks</h2> 
                <h3 class="bp4-heading">GeeksforGeeks</h3> 
                <h4 class="bp4-heading">GeeksforGeeks</h4> 
                <h5 class="bp4-heading">GeeksforGeeks</h5> 
                <h6 class="bp4-heading">GeeksforGeeks</h6> 
            </div> 
        </div> 
    ); 
} 
  
export default App; 

Output:

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

Javascript

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
  
function App() { 
    return ( 
        <div style={{ padding: 20, color: "green" }}> 
            <h1>ReactJS Blueprint Typography</h1> 
            <div style={{ color: "black" }}> 
                <ol class=".modifier"> 
                    <li>Data Structures</li> 
                    <li>Algorithms</li> 
                    <li> 
                        Programming Languages 
                        <ul class=".modifier"> 
                            <li>Java</li> 
                            <li>Python</li> 
                            <li>C++</li> 
                        </ul> 
                    </li> 
                </ol> 
            </div> 
        </div> 
    ); 
} 
  
export default App; 