src/app/components/contact-card/contact-card.component.ts
Displayes a card with contact information for an user
| selector | contact-card |
| styleUrls | ./contact-card.component.scss |
| templateUrl | ./contact-card.component.html |
Inputs |
| contactCard | |
Type : ContactCard[]
|
|
Default value : []
|
|
|
Details of an user to be displayed inside the card |
|
import { Component, Input } from '@angular/core';
import { ContactCard } from './contact-card';
/** Displayes a card with contact information for an user */
@Component({
selector: 'contact-card',
templateUrl: './contact-card.component.html',
styleUrls: ['./contact-card.component.scss'],
})
export class ContactCardComponent {
/** Details of an user to be displayed inside the card */
@Input() contactCard: ContactCard[] = [];
}
<mat-card class="contact-card" *ngFor="let card of contactCard">
<div class="image-container">
<img mat-card-image [src]="card.image" [alt]="card.alt" />
</div>
<mat-card-content>
<p class="work-field">{{ card.field }}</p>
<p class="contact-name">{{ card.name }}</p>
<mat-divider></mat-divider>
<p class="designation">
{{ card.role }}
</p>
<p class="contact-email">
<span class="material-symbols-outlined">email</span>
<a href="mailto:{{ card.email }}">{{ card.email }}</a>
</p>
</mat-card-content>
</mat-card>
./contact-card.component.scss
:host {
display: flex;
flex-wrap: wrap;
::ng-deep .mat-mdc-card-image {
width: unset;
}
.contact-card {
height: 26rem;
width: 17.5rem;
padding: 2rem;
&:hover {
box-shadow:
0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2),
0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19);
}
border: 1px solid #e0e0e0;
transition: 0.2s ease-in-out;
}
.contact-card:not(:last-child) {
margin-right: 1.5rem;
}
.image-container {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 2rem;
}
.mat-mdc-card-image {
height: 168px;
width: 168px;
}
.work-field {
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #444c65;
}
.contact-name {
font-weight: 400;
font-size: 1.25rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #212121;
}
.designation {
font-weight: 300;
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 0.005em;
color: #212121;
padding-top: 1rem;
}
.contact-email {
display: flex;
align-items: center;
font-size: 1rem;
line-height: 1.5rem;
}
.mat-mdc-card-content {
padding: 0;
}
@media (max-width: 80rem) {
.contact-card {
margin-bottom: 1rem;
}
}
@media (max-width: 58.5rem) {
.contact-card:not(:last-child) {
margin-right: 1.5rem;
}
}
@media (max-width: 26.75rem) {
.contact-card {
width: 100%;
margin-bottom: 1.5rem;
}
.mat-mdc-card-content {
text-align: center;
}
.contact-email {
justify-content: center;
}
.contact-card:not(:last-child) {
margin-right: unset;
}
}
}