Getting started in EJ2 TypeScript Card control
8 May 20234 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 withe-card
class into yourindex.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 withe-card-header-caption
class, and also content will be added by adding element withe-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:
<!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="https://cdn.syncfusion.com/ej2/23.1.36/material.css" rel="stylesheet" />
<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" 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>