Header content in Angular Card component

4 Mar 20267 minutes to read

Header

The Card component supports headers containing titles, subtitles, and images to provide context and visual hierarchy. The header section is created by adding a div element with the e-card-header class.

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 to define the main title text.

• Place a div element with the e-card-sub-title class inside the caption element to define supplementary subtitle text.

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, positioned either before or after the header caption wrapper element.

app.component.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;

}

main.ts

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

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;

}

main.ts

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