Angular PrimeNG Card Styling

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.

app.component.html

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>

app.component.ts

JavaScript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'cardStyling';
}

app.module.ts

JavaScript

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.

app.component.html

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>

app.component.ts

JavaScript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'cardStyling';
}

app.module.ts

JavaScript

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 {}

style.css

CSS

: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://www.primefaces.org/primeng/card

Angular PrimeNG Card Styling

Explore