HelpBot Assistant

How can I help you?

Header content in React Card component

5 Mar 202624 minutes to read

The Card component can be created with header title, subtitle, and images. To add a header, create a div element with the class e-card-header.

The Card provides the following elements and class definitions for header content:

Elements Description
Caption The wrapper element that includes title and subtitle content.
Image Supports header images with specified dimensions and positioning.
Class Description
e-card-header-caption To group the title and subtitle within the header which acts as wrapper.
e-card-header-title Main title text with in the header.
e-card-sub-title A sub-title within the header.
e-card-header-image To include heading image within the header.
e-card-corner To add rounded corner for the image.

Adding Title and Subtitle

To add a header to the Card component, create a wrapper div element with the e-card-header-caption class.

  • Place a div element with the e-card-header-title class inside the header caption for the main title.

  • Place a div element with the e-card-sub-title class inside the header caption element for the subtitle.

Header Image

The Card header supports adding images within the header section. Images are positioned either before or after the header caption based on the HTML element’s position in the header structure.

  • Add a header image by creating a div element with the e-card-header-image class, which can be placed before or after the header caption wrapper element.

[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">
          <div className="e-card-header">
            <div className="e-card-header-image football e-card-corner"/>
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
        </div>
        <div className="e-card">
          <div className="e-card-header">
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
            <div className="e-card-header-image football"/>
          </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">
          <div className="e-card-header">
            <div className="e-card-header-image football e-card-corner" />
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
        </div>
        <div className="e-card">
          <div className="e-card-header">
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
            <div className="e-card-header-image football" />
          </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/32.2.3/ej2-layouts/styles/tailwind3.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 .e-card-header .e-card-header-image {
        background-image: url('./football.png');
    }

    .map {
        background-image: url('./map.png');
        height: 200px;
    }

    .e-card {
        width: 300px
    }

    .e-card:last-child {
        margin-top: 30px;
    }
</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>
        <div className="e-card">
          <div className="e-card-header">
            <div className="e-card-header-image football e-card-corner"/>
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
        </div>
        <div className="e-card">
          <div className="e-card-header">
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
            <div className="e-card-header-image football"/>
          </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">
          <div className="e-card-header">
            <div className="e-card-header-image football e-card-corner" />
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
        </div>
        <div className="e-card">
          <div className="e-card-header">
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
            <div className="e-card-header-image football" />
          </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/32.2.3/ej2-layouts/styles/tailwind3.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 .e-card-header .e-card-header-image {
        background-image: url('./football.png');
    }

    .map {
        background-image: url('./map.png');
        height: 200px;
    }

    .e-card {
        width: 300px
    }

    .e-card:last-child {
        margin-top: 30px;
    }
</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>

Content

Following the header, the content section holds the main body of the card, including text, images, links, and any HTML elements. The content section provides flexibility for various content types and can be positioned within the Card root element or inside other Card inner elements.

  • Create a div element with the class e-card-content.
  • Place the content div element within the Card root element or inside any Card inner elements.

[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">
          <div className="e-card-header">
            <div className="e-card-header-image football"/>
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
          <div className="e-card-content">
            Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.
          </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">
          <div className="e-card-header">
            <div className="e-card-header-image football" />
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
          <div className="e-card-content">
            Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.
          </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/32.2.3/ej2-layouts/styles/tailwind3.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 .e-card-header .e-card-header-image {
        background-image: url('./football.png');
    }

    .map {
        background-image: url('./map.png');
        height: 200px;
    }

    .e-card {
        width: 300px
    }

    .e-card:last-child {
        margin-top: 30px;
    }
</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>
        <div className="e-card">
          <div className="e-card-header">
            <div className="e-card-header-image football"/>
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
          <div className="e-card-content">
            Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.
          </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">
          <div className="e-card-header">
            <div className="e-card-header-image football" />
            <div className="e-card-header-caption">
              <div className="e-card-header-title"> Laura Callahan</div>
              <div className="e-card-sub-title">Sales Coordinator and Representative</div>
            </div>
          </div>
          <div className="e-card-content">
            Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.
          </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/32.2.3/ej2-layouts/styles/tailwind3.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 .e-card-header .e-card-header-image {
        background-image: url('./football.png');
    }

    .map {
        background-image: url('./map.png');
        height: 200px;
    }

    .e-card {
        width: 300px
    }

    .e-card:last-child {
        margin-top: 30px;
    }
</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>