src/app/components/sop-links/sop-links.component.ts
Displays a list of URLs with title
| selector | ccf-sop-links |
| styleUrls | ./sop-links.component.scss |
| templateUrl | ./sop-links.component.html |
Inputs |
| links | |
Type : SopLinks
|
|
|
Title and details of URLs to be displayed |
|
import { Component, Input } from '@angular/core';
import { SopLinks } from './sop-links';
/** Displays a list of URLs with title */
@Component({
selector: 'ccf-sop-links',
templateUrl: './sop-links.component.html',
styleUrls: ['./sop-links.component.scss'],
})
export class SopLinksComponent {
/** Title and details of URLs to be displayed */
@Input() links!: SopLinks;
}
<div class="sop-title">
{{ links.sopTitle }}
</div>
<div class="sop-items">
<ul>
<li *ngFor="let link of links.href">
<a class="text" href="{{ link.href }}" target="_blank">{{ link.title }}</a>
</li>
</ul>
</div>
./sop-links.component.scss
:host {
display: block;
.sop-title {
font-weight: 300;
font-size: 1.5rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #000000;
margin-bottom: 2rem;
}
.sop-items {
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #054f89;
}
.text:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
color: #444c65;
}
a {
text-decoration: none;
&:visited {
color: #054f89;
}
&:link {
color: #054f89;
}
}
@media (max-width: 26.75rem) {
.sop-title {
line-height: 2.125rem;
}
}
}