Card image in React Card component

7 Oct 202521 minutes to read

Images

The Card component supports including images within its elements. You can add an image as a direct element anywhere inside the card root by adding the e-card-image class to a div element. Using this class, you can write CSS styles to load images into that element.

By default, card images occupy the full width of their parent element.

    <div className = "e-card">
        <div className="e-card-image">
        </div>
    </div>

Title

Card images support including a title or caption for the image. By default, the title is placed over the image in the left-bottom position with an overlay effect.

    <div className = "e-card">
        <div className="e-card-image">
            <div className="e-card-title"></div>
        </div>
    </div>

[Class-component]

import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component {
    render() {
        return (<div className="e-card">
        <div className="e-card-image">
          <div className="e-card-title">JavaScript </div>
        </div>
        <div className="e-card-content">
          JavaScript Succinctly was written to give readers an accurate, concise examination of JavaScript objects and their supporting nuances, such as complex values, primitive values, scope, inheritance, the head object, and more. </div>
      </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public render() {
    return (
      <div className="e-card">
        <div className="e-card-image">
          <div className="e-card-title">JavaScript </div>
        </div>
        <div className="e-card-content">
          JavaScript Succinctly was written to give readers an accurate, concise examination of JavaScript objects and their supporting nuances, such as complex values, primitive values, scope, inheritance, the head object, and more. </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Card Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>

<style>
    .e-card-image {
        background: url('./sample.jpg');
        height: 160px;
        ;
    }

    .e-card {
        width: 200px;
        margin: auto;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

[Functional-component]

import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
    return (<div className="e-card">
        <div className="e-card-image">
          <div className="e-card-title">JavaScript </div>
        </div>
        <div className="e-card-content">
          JavaScript Succinctly was written to give readers an accurate, concise examination of JavaScript objects and their supporting nuances, such as complex values, primitive values, scope, inheritance, the head object, and more. </div>
      </div>);
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function ReactApp () {

    return (
      <div className="e-card">
        <div className="e-card-image">
          <div className="e-card-title">JavaScript </div>
        </div>
        <div className="e-card-content">
          JavaScript Succinctly was written to give readers an accurate, concise examination of JavaScript objects and their supporting nuances, such as complex values, primitive values, scope, inheritance, the head object, and more. </div>
      </div>
    );

}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Card Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>

<style>
    .e-card-image {
        background: url('./sample.jpg');
        height: 160px;
        ;
    }

    .e-card {
        width: 200px;
        margin: auto;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Divider

Dividers are used to separate elements inside the card. You can add a divider inside the card elements to create visual separation between different sections.

  • Place a div element with the e-card-separator class inside the card element to add a divider.

[Class-component]

import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component {
    render() {
        return (<div>
        <div className="e-card" id="basic">
          <div className="e-card-title">Explore Cities</div>
          <div className="e-card-separator"/>
          <div className="e-card-content">
            Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people live in Sydney which makes it the biggest city in Oceania.
            </div>
          <div className="e-card-separator"/>
          <div className="e-card-content">
            New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact upon commerce and etc.
            </div>
          <div className="e-card-separator"/>
          <div className="e-card-content">
            Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized as part of the Asian continent.
            </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public render() {
    return (
      <div>
        <div className="e-card" id="basic">
          <div className="e-card-title">Explore Cities</div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people live in Sydney which makes it the biggest city in Oceania.
            </div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact upon commerce and etc.
            </div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized as part of the Asian continent.
            </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Card Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

[Functional-component]

import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
    return (<div>
        <div className="e-card" id="basic">
          <div className="e-card-title">Explore Cities</div>
          <div className="e-card-separator"/>
          <div className="e-card-content">
            Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people live in Sydney which makes it the biggest city in Oceania.
            </div>
          <div className="e-card-separator"/>
          <div className="e-card-content">
            New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact upon commerce and etc.
            </div>
          <div className="e-card-separator"/>
          <div className="e-card-content">
            Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized as part of the Asian continent.
            </div>
        </div>
      </div>);
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function ReactApp () {

    return (
      <div>
        <div className="e-card" id="basic">
          <div className="e-card-title">Explore Cities</div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people live in Sydney which makes it the biggest city in Oceania.
            </div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact upon commerce and etc.
            </div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized as part of the Asian continent.
            </div>
        </div>
      </div>
    );

}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Card Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

See Also