React.js Blueprint Card Component Props

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.

The Props are:

• className: It is a space-delimited list of class names to pass along to a child element.
• elevation: It denotes the intensity of the drop shadow beneath the card. It takes values from 0 to 4.
• interactive: It is a boolean value. It denotes whether the card should respond to user interactions or not.  It is true by default.
• onClick: It is a void callback function invoked when the card is clicked.

Syntax:

 <Card > ... </Card >

Prerequisite: Introduction and Installation reactJS
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 Elevation 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 to the elevation prop and passing the interactive prop.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Card, Elevation } from "@blueprintjs/core";

function App() {
    return (
        <div
            style={{
                margin: 30,
            }}
        >
            <h4>ReactJS Blueprint Card Component Props</h4>
            <Card elevation={Elevation.THREE} interactive>
                <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  Classes from “@blueprintjs/core”. To the Card, we created earlier now we are passing Classes.ELEVATION_4 as the className and have added an onClick function named onClickHandler which shows “Clicked !” in the alert.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Card, Classes } from "@blueprintjs/core";

function App() {
    const onClickHandler = () => {
        alert("Clicked !");
    };
    return (
        <div
            style={{
                margin: 30,
            }}
        >
            <h4>ReactJS Blueprint Card Component Props</h4>
            <Card className={Classes.ELEVATION_4}
                  onClick={onClickHandler}>
                <h1>Welcome to GeeksforGeeks</h1>
                <p>Click Me !</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.props