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">neveropen</h1> <h2 class="bp4-heading">neveropen</h2> <h3 class="bp4-heading">neveropen</h3> <h4 class="bp4-heading">neveropen</h4> <h5 class="bp4-heading">neveropen</h5> <h6 class="bp4-heading">neveropen</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; |
Output:
Reference: https://blueprintjs.com/docs/#core/typography
