<div class="card">
     <div class="card-header pb-0">
         <h4>Basic Card</h4>
         <p class="f-m-light mt-1">This is a simple basic card using anywhere.</p>
     </div>
     <div class="card-body">
         <p class="mb-0">Tabs have long been used to show alternative views of the same group of information tabs in
             software. Known as<em class="txt-danger">“module tabs”</em> , these are still used today in web sites. For
             instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to
             switch between bookings for flights, hotels and car hire.
            </p>
     </div>
 </div>

<div class="row">
  @for( cardData of Data; track cardData){
  <div class="col-12 col-md-6">
    <div class="card">
      <div class="card-header border-{{ cardData.borderClass }}" [class.pb-0]="cardData.heading !== 'Border Bottom'">
        <h4>{{ cardData.heading }}</h4>
        <p class="mt-1 f-m-light" [innerHTML]="cardData.desc"></p>
      </div>
      <div class="card-body">
        <p class="{{ cardData.bodyTextClass }}" [innerHTML]="cardData.bodyText"></p>
        @if(cardData.id === 2){
        <form>
          <label class="form-label" for="exampleFormControlInput1">Email address</label>
          <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="youremail@gmail.com">
        </form>
        }
      </div>
    </div>
  </div>
  }
</div>

import { Component } from '@angular/core';
import { commonBorderPositionCardData } from '../../../../shared/data/bonus-ui/creative-cards';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-common-border-card',
    templateUrl: './common-border-card.html',
    styleUrls: ['./common-border-card.scss'],
    imports: [FormsModule]
})
export class CommonBorderCard {

  public Data = commonBorderPositionCardData;

}

export const commonBorderPositionCardData = [
    {
        id : 1,
        borderClass : 'l-primary pb-0',
        heading : 'Border Left',
        desc : 'Use the class of.b-l-* for left border.',
        bodyTextClass : '',
        bodyText : "Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.
Visit Us: 	2600 Hollywood Blvd,Florida, United States-	33020
Mail Us:contact@us@gmail.com
Contact Number: (954) 357-7760",
    },
    {
        id : 2,
        borderClass : 'r-secondary pb-0',
        heading : 'Border Right',
        desc : 'Use the class of.b-r-* for right border.',
        bodyTextClass : '',
        bodyText : "Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.",
    },
    {
        id : 3,
        borderClass : 't-danger',   
        heading : 'Border Top',
        desc : 'Use the class of.b-t-* for top border.',
        bodyTextClass : 'mb-0',
        bodyText : 'Tabs have long been used to show alternative views of the same group of information tabs in software. Known as“module tabs” , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.',
    },
    {
        id : 4,
        borderClass : 'b-info',
        heading : 'Border Bottom',
        desc : 'Use the class of.b-b-* for bottom border.',
        bodyTextClass : 'mb-0',
        bodyText : 'A navigation bar is a particularly important feature because it allows visitors to quickly and easily find important pages on your website , like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate.',
    },
]