error-card.component.html

{{text}}

error-card.component.scss

$color-red: #E23636;
$spacing: 16px;

:host {
  border-radius: 3px;
  border: $color-red 1px solid;
  color: $color-red;
  padding: $spacing;
  margin: $spacing;
  display: block;
}

error-card.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-error-card',
  templateUrl: './error-card.component.html',
  styleUrls: ['./error-card.component.scss']
})
export class ErrorCardComponent {
  @Input() text = 'An unexpected error occurred.';
}