src/app/components/board-members/board-members.component.ts
Displays a card with details of board members
| selector | ccf-board-members |
| styleUrls | ./board-members.component.scss |
| templateUrl | ./board-members.component.html |
Inputs |
| membersData | |
Type : BoardMemberItems[]
|
|
Default value : []
|
|
|
Details for each board member card |
|
import { Component, Input } from '@angular/core';
import { BoardMemberItems } from './board-members';
/** Displays a card with details of board members */
@Component({
selector: 'ccf-board-members',
templateUrl: './board-members.component.html',
styleUrls: ['./board-members.component.scss'],
})
export class BoardMembersComponent {
/** Details for each board member card */
@Input() membersData: BoardMemberItems[] = [];
}
<div class="member-container">
<p class="members-title">Board Members</p>
<div class="member" *ngFor="let data of membersData">
<div class="image">
<img [src]="data.image" [alt]="data.alt" />
</div>
<div class="about">
<markdown>{{ data.description }}</markdown>
</div>
</div>
</div>
./board-members.component.scss
:host {
.member {
display: flex;
align-items: center;
padding-top: 1rem;
}
.members-title {
font-weight: 300;
font-size: 1.5rem;
line-height: 1.5rem;
letter-spacing: 0.005em;
}
.member-container {
padding-bottom: 2.5rem;
}
.about {
font-weight: 300;
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
margin-left: 2.5rem;
}
@media (max-width: 26.75rem) {
.member {
align-items: flex-start;
}
}
}
::ng-deep .about a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
color: #444c65;
}