Angular PrimeNG Card Styling
Last Updated :
28 Apr, 2025
A responsive website may be created with great ease using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style. In this article, we will learn how to style the Card Component in Angular PrimeNG.
A card is a display device for extensible and adaptable content containers.
Angular PrimeNG Card Styling:
- p-card: This class is for applying custom styling to the container element.
- p-card-reader: This class is for applying custom styling to the title element.
- p-card-subheader: This class is for applying custom styling to the subtitle element.
- p-card-content: This class is for applying custom styling to the content of the card.
- p-card-footer: This class is for applying custom styling to the footer of the card.
Syntax:
<p-card
header="..."
subheader="...">
<p-card>
Creating Angular application and Installing the modules:
Step 1: Use the command below to create an Angular application.
ng new appname
Step 2: Use the following command to move to our project folder, appname, after creating it.
cd appname
Step 3: Install PrimeNG in the specified location.
npm install primeng --save
npm install primeicons --save
Project Structure: The project structure will look like this once the installation is finished:
Steps to run the above application: Run the below command
ng serve --open
Example 1: In this example, use inline style or style attributes for styling the Card Styling in Angular PrimeNG.
HTML
<h1>
<span>
<img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
class="gfg-logo" alt="icon" />
</span>
<span style="color: green; font-size: 40px;">
GeeksforGeeks
</span>
</h1>
<h3>PrimeNG Card Styling</h3>
<p-card
header="Angular PrimeNG Card component"
[style]="{
border: '2px solid black',
borderRadius: '15px',
width: '450px',
backgroundColor: 'green',
color: 'white'
}">
<p>
A responsive website may be created
with great ease using the open-source
Angular PrimeNG framework, which has
a wide range of native Angular UI components
for superb style.
</p>
</p-card>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'cardStyling';
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CardModule } from "primeng/card";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
CardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Output:
Example 2: In this example, we will be using predefined structural styling classes to style the Angular PrimeNG Card Styling.
HTML
<h1>
<span>
<img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
class="gfg-logo" alt="icon" />
</span>
<span style="color: green; font-size: 40px;">
GeeksforGeeks
</span>
</h1>
<h3>PrimeNG Card Styling</h3>
<p-card
header="Angular PrimeNG Card Styling"
subheader="PrimeNG Card Component">
<ng-template pTemplate="header">
<img src=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
alt="icon"/>
</ng-template>
<p>
A responsive website may be
created with great ease using
the open-source Angular PrimeNG
framework, which has a wide range of native
Angular UI components for superb style.
</p>
<ng-template pTemplate="footer">
<p-button label="Continue" icon="pi pi-check"></p-button>
<p-button label="Close" icon="pi pi-times"></p-button>
</ng-template>
</p-card>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'cardStyling';
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CardModule } from "primeng/card";
import { ButtonModule } from "primeng/button";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
CardModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
:host ::ng-deep .p-card {
border-radius: 25px !important;
width: 550px;
border: 2px solid black;
}
:host ::ng-deep .p-card-header {
border-radius: 25px 25px 0px 0px !important;
color: white;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 10px;
width: 150px;
margin: 0 auto;
}
:host ::ng-deep .p-card .p-card-subtitle {
color: black !important;
}
:host ::ng-deep .p-card .p-card-content {
font-size: 18px;
font-style: italic;
font-family: cursive;
font-weight: 700;
color: black;
}
:host ::ng-deep .p-card .p-card-footer {
display: flex;
justify-content: center;
}
:host ::ng-deep .p-button.p-element {
margin-right: 5px;
}
Output:
Reference: https://primefaces.org/primeng/card
Similar Reads
Angular PrimeNG Badge Styling Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will see the Angular Prime
3 min read
Angular PrimeNG Carousel Styling Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
Angular PrimeNG Chip Styling Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see Chip Styling in Angular PrimeNG. The Chip Component represents entities with the help of labels, icons, and im
3 min read
Angular PrimeNG Dock Styling Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
Angular PrimeNG Image Styling Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
3 min read