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;
|
Output:
Reference: https://blueprintjs.com/docs/#core/typography
Share your thoughts in the comments
Please Login to comment...