Header content in React Card component
30 Jan 202324 minutes to read
Header
The Card can be created with header title, sub title and images. For adding header you need to create div
element with the class e-card-header
added.
Card provides below elements and corresponding class definitions to include header.
Elements | Description |
---|---|
Caption | It is the wrapper element to include title and sub-title. |
Image | It supports to include header images with the specified dimensions. |
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. |
Title and Subtitle
For adding header to the Card , you need to create wrapper div
element with e-card-header-caption
class.
-
Place the
div
element withe-card-header-title
class inside the header caption for adding main title. -
Place the div element with
e-card-sub-title
class inside the header caption element for adding sub-title.
Image
Card header has an option for adding images in the header. It is aligned with either before or after the header based on the HTML element positioned in the header structure.
- The header image can be added by creating a
div
element withe-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/27.1.48/ej2-layouts/styles/material.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/27.1.48/ej2-layouts/styles/material.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
Content in Card holds texts, images, links and all possible HTML elements. Its adaptable within the Card root element.
- Create a
div
element with the classe-card-content
. - Place content
div
element in the Card root element or within 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/27.1.48/ej2-layouts/styles/material.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/27.1.48/ej2-layouts/styles/material.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>