Search results

Getting started with JavaScript Card control

14 Apr 2021 / 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.

Copied to clipboard
|-- @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.
Copied to clipboard
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]

Copied to clipboard
@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]

Copied to clipboard
    <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.
Copied to clipboard
<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.
Copied to clipboard
npm start

Output will be as follows:

Source
Preview
index.html
index.css
Copied to clipboard
<!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/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>
Copied to clipboard

See Also