Header content in Angular Card component

27 Aug 20257 minutes to read

The Card component can be created with 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 header content:

Elements	Description
Caption	The wrapper element that includes title and subtitle content.
Image	Supports header images with specified dimensions and positioning.

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.

Adding Title and Subtitle

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

Header Image

The Card header provides an option for adding images within the header section. Images are positioned either before or after the header caption based on the HTML element’s position in the header structure.

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

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-container',
    template: `
        <div style="margin: 50px;">
        <div tabindex="0" class="e-card">
            <div class="e-card-header">
                <div class="e-card-header-image football e-card-corner"></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">
                <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>
        `
})

export class AppComponent {
    @ViewChild('element') element: any;

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Content

The content section in Card components holds text, images, links, and all possible HTML elements. Content is adaptable within the Card root element and provides flexibility for various content types.

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

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-container',
    template: `
        <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>
        `
})

export class AppComponent {
    @ViewChild('element') element: any;

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));