src/app/components/simple-tile/simple-tile.component.ts
Displays an outlined card with a description inside
| selector | ccf-simple-tile |
| styleUrls | ./simple-tile.component.scss |
| templateUrl | ./simple-tile.component.html |
Inputs |
| definitions | |
Type : TileItems[]
|
|
Default value : []
|
|
|
Message to be shown in the card |
|
import { Component, Input } from '@angular/core';
import { TileItems } from './tile-items';
/** Displays an outlined card with a description inside */
@Component({
selector: 'ccf-simple-tile',
templateUrl: './simple-tile.component.html',
styleUrls: ['./simple-tile.component.scss'],
})
export class SimpleTileComponent {
/** Message to be shown in the card */
@Input() definitions: TileItems[] = [];
}
<mat-card class="mat-card" *ngFor="let definition of definitions">
<mat-card-content>
<markdown [data]="definition.title"></markdown>
</mat-card-content>
</mat-card>
./simple-tile.component.scss
:host {
.mat-card {
font-size: 1rem;
font-weight: 300;
letter-spacing: 0.005em;
line-height: 1.5rem;
margin-bottom: 0.5rem;
}
::ng-deep markdown p {
margin: 0px !important;
}
}