Getting started with JavaScript Card control

31 Mar 2023 / 2 minutes to read

This section explains how to create a simple Card using styles by configuring the structure for the header, content, using Essential JS 2 quickstart seed repository.

Dependencies

The Card is pure CSS component so no other package dependencies are needed to render the Card.

|-- @syncfusion/ej2-layouts

Installation and configuration

Clone the Essential JS 2 quickstart application project from GitHub, and install necessary npm packages using the following command line scripts.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

By default, the project is configured with all the EJ2 dependencies. Since Card component is a pure CSS component so no need to configure src/system.config.js file. For better understanding, remove that file.

The Card CSS files are available in the ej2-layouts package folder. This can be referenced in your application using the following code.

[src/styles/styles.css]

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';

Adding a simple Card

Add the HTML div element with e-card class into your index.html.

[src/index.html]

    <div class = "e-card">
      Sample Card
    </div>

Adding a header and content

You can create Card with a header in a specific structure. For adding header you need to create a div element with e-card-header class added.

You can include heading inside the Card header by adding a div element with e-card-header-caption class, and also content will be added by adding element with e-card-content. For detailed information, refer to the Header and Content.

<div class = "e-card">                    --> Root Element
    <div class="e-card-header">           --> Root Header Element
        <div class="e-card-header-caption">    --> Root Heading Element
            <div class="e-card-header-title"></div>   --> Heading Title Element
        </div>
        <div class="e-card-content"></div>         --> Card content Element
    </div>
</div>

Now, run the application in the browser using the following command.

npm start

Output will be as follows:

Source

Preview

index.html

index.css

<!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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/material.css" rel="stylesheet" />
</head>

<body>
    <div style="margin: 50px;">
        <!--element which is going to render the Card-->
        <div tabindex="0" class="e-card" id="basic">
            <div class="e-card-header">
                <div class="e-card-header-caption">
                    <div class="e-card-header-title">Advanced UWP</div>
                </div>
            </div>
            <div class="e-card-content">
                Communicating with Windows 10 and Other Apps, the second in a five-part series written by Succinctly series
                author Matteo Pagani. To download the complete white paper, and other papers in the series, visit
                the White Paper section of Syncfusion’s Technology Resource Portal.
            </div>
        </div>
    </div>
</body>

</html>

Getting started with JavaScript Card control

Dependencies

Installation and configuration

Adding a simple Card

Adding a header and content

See Also