src/app/components/page-header/page-header.component.ts
Displays page header data inside a card
| selector | ccf-page-header |
| styleUrls | ./page-header.component.scss |
| templateUrl | ./page-header.component.html |
Inputs |
| headerCard | |
Type : PageHeaderItems[]
|
|
Default value : []
|
|
|
Details to be displayed inside the card |
|
import { PageHeaderItems } from './page-header-items';
import { Component, Input } from '@angular/core';
/** Displays page header data inside a card */
@Component({
selector: 'ccf-page-header',
templateUrl: './page-header.component.html',
styleUrls: ['./page-header.component.scss'],
})
export class PageHeaderComponent {
/** Details to be displayed inside the card */
@Input() headerCard: PageHeaderItems[] = [];
}
<mat-card *ngFor="let cardDetails of headerCard" class="header-card">
<div class="icon">
<img [src]="cardDetails.image" [alt]="cardDetails.alt" class="card-image" />
</div>
<div class="body">
<div class="card-heading">
{{ cardDetails.title }}
</div>
<div class="card-subheading">
{{ cardDetails.subtitle }}
</div>
</div>
</mat-card>
./page-header.component.scss
:host {
.header-card {
display: flex;
flex-direction: row;
max-width: 77rem;
}
.icon {
height: 10rem;
background-color: #444a65;
}
.card-image {
height: 100%;
}
.body {
padding-left: 1.5rem;
align-self: center;
}
.card-heading {
display: flex;
flex-direction: column wrap;
font-weight: 300;
font-size: 2.25rem;
line-height: 2.75rem;
letter-spacing: 0.005em;
color: #212121;
}
.card-subheading {
font-weight: 300;
font-size: 1rem;
line-height: 2.5rem;
letter-spacing: 0.005em;
color: #212121;
}
mat-card {
padding: 0rem 1rem 0rem 0rem;
flex-direction: row;
display: flex;
overflow: hidden;
}
@media (max-width: 62.5rem) {
.body {
padding: 1rem;
}
.card-image {
display: none;
}
.card-heading {
margin-bottom: 1rem;
font-size: 1.75rem;
}
.card-subheading {
line-height: 1.5rem;
}
}
}