Open In App

React.js Blueprint Card Component Elevation

Improve
Improve
Like Article
Like
Save
Share
Report

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. 

The React.js Blueprint Card Component is used when the user wants to display content related to a single subject in a rectangular box.

Syntax:

<Card elevation={}>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this:

 

Example 1: We are importing the  Card and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

We are adding the Card Component with an <h1> and <p> tag in it, to the Card Component, we are passing value Classes.ELEVATION_3 to className.

App.js




import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Card, Classes } from "@blueprintjs/core";
  
function App() {
    return (
        <div
            style={{
                margin: 30,
            }}
        >
            <h4>
                ReactJS Blueprint Card 
                Component Elevation
            </h4>
            <Card className={Classes.ELEVATION_3}>
                <h1>Welcome to GeeksforGeeks</h1>
  
                <p>Let's explore ...</p>
            </Card>
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2: We are importing the  Card and Elevation from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”. To the elevation prop, we are passing state num, the num state is created using react useState hook initialized with ” – “. 

A dropdown is created that takes certain values whenever any change is made in the drop-down an onChange function naming onHandleChange gets triggered that set the value of num and accordingly the value of the elevation prop changes.

App.js




import React, { useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Card, Elevation } from "@blueprintjs/core";
  
function App() {
    const [num, setNum] = useState(" - ");
    const onHandleChange = (e) => {
        setNum(e.target.value);
    };
    return (
        <div
            style={{
                margin: 30,
            }}
        >
            <h4>
                ReactJS Blueprint Card 
                Component Elevation
            </h4>
              
            <select
                name="elevation"
                id="elevation"
                style={{ marginLeft: 20 }}
                onChange={onHandleChange}
            >
                <option value=" - "> - </option>
                <option value={Elevation.TWO}>2</option>
                <option value={Elevation.THREE}>3</option>
                <option value={Elevation.FOUR}>4</option>
            </select>
            <p style={{ marginLeft: 80 }}>
                elevation =<b style={{ color: "red" }}>
                    {num}
                </b>
            </p>
  
            <Card elevation={num}>
                <h1>Welcome to GeeksforGeeks</h1>
  
                <p>Let's explore ...</p>
            </Card>
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output: 

 

Reference:  https://blueprintjs.com/docs/#core/components/card.elevation



Last Updated : 03 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads