Header content in EJ2 JavaScript Card control

5 Mar 20268 minutes to read

The Card can be created with a 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 corresponding class definitions to include a header.

Elements	Description
Caption	Wrapper element to include title and subtitle.
Image	Supports including header images with specified dimensions.

Class	Description
`e-card-header-caption`	Groups the title and subtitle within the header, acting as a wrapper.
`e-card-header-title`	Main title text within the header.
`e-card-sub-title`	Subtitle within the header.
`e-card-header-image`	Includes heading image within the header.
`e-card-corner`	Adds rounded corners to the image.

Title and Subtitle

To add a header to the Card, 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 adding the main title.
Place a div element with the e-card-sub-title class inside the header caption element for adding the subtitle.

Image

The Card header supports adding images within the header. Images are aligned either before or after the header based on the HTML element position in the header structure.

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

index.html
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Card Component</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link rel="shortcut icon" href="resources/favicon.ico">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/bootstrap5.3.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div style="margin: 50px;">
        <div tabindex="0" class="e-card">
            <div class="e-card-header">
                <div class="e-card-header-image football"></div>
                <div class="e-card-header-caption">
                    <div class="e-card-header-title"> Laura Callahan</div>
                    <div class="e-card-sub-title">Sales Coordinator and Representative</div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-left: 50px;margin-top:30px">
        <div tabindex="0" class="e-card">
            <div class="e-card-header e-card-corner">
                <div class="e-card-header-caption">
                    <div class="e-card-header-title"> Laura Callahan</div>
                    <div class="e-card-sub-title">Sales Coordinator and Representative</div>
                </div>
                <div class="e-card-header-image football"></div>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Content

Content in the Card holds text, images, links, and all possible HTML elements. It can be placed within the Card root element.

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

index.html
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Card Component</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link rel="shortcut icon" href="resources/favicon.ico">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/bootstrap5.3.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div style="margin: 50px;">
        <!--element which is going to render the Card-->
        <div tabindex="0" class="e-card">
            <div class="e-card-header">
                <div class="e-card-header-image football"></div>
                <div class="e-card-header-caption">
                    <div class="e-card-header-title"> Laura Callahan</div>
                    <div class="e-card-sub-title">Sales Coordinator and Representative</div>
                </div>
            </div>
            <div class="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>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Search docs

Ask HelpBot