Flight Training Cards
UI container that controls the background color, border radius and box shadow. This version demonstrates a flight training card.
Flight Training Card
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col-md-8 card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list active">
<li>Status Tag</li>
<li>Category tag</li>
</ul>
<h4 class="font-weight-normal"><a href="#">Flight Training Card Heading</a></h4>
<ul class="lmp-inline-bullet">
<li>Training Type</li>
<li>Airplane Model</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product Number</li>
<li>TP ID Number</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Training location</li>
<li>Date Range</li>
<li>Num or participants</li>
</ul>
</div>
<div class="col-md-4 card-progress">
<div class="row h-100">
<div class="col-7 col-md-12">
<h5 class="progress-label">Progress Label</h5>
<div class="prog-val">[Progress Value]</div>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</div>
<div class="col-5 col-md-12 mt-md-auto d-flex flex-column flex-md-row justify-content-end justify-content-md-between progress-action">
<span class="progress-badge paid"><i class="lmp-icon icon-sm" aria-hidden="true">check_circle</i> Paid</span>
</div>
</div>
</div>
</div>
</div>
Flight Training Card / No Progress Component
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list active">
<li>Status Tag</li>
<li>Category tag</li>
</ul>
<h4 class="font-weight-normal"><a href="#">Flight Training Card Heading</a></h4>
<ul class="lmp-inline-bullet">
<li>Training Type</li>
<li>Airplane Model</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product Number</li>
<li>TP ID Number</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Training location</li>
<li>Date Range</li>
<li>Num or participants</li>
</ul>
</div>
</div>
</div>
Active Flight Training Card
<!-- Paid Example -->
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col-md-8 card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list active">
<li>Active</li>
<li>Flight Training</li>
</ul>
<h4 class="font-weight-normal"><a href="#">(787) Air Canada Type Rating with LOFT, CATT II/III</a></h4>
<ul class="lmp-inline-bullet">
<li>Type Rating</li>
<li>787 - 8/9/10</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product #100178895</li>
<li>TP ID #1234567</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Miami</li>
<li>3 Aug 2020 - 12 Aug 2020</li>
<li>2 Participants</li>
</ul>
</div>
<div class="col-md-4 card-progress">
<div class="row h-100">
<div class="col-7 col-md-12">
<h5 class="progress-label">Course Progress</h5>
<div class="prog-val">50%</div>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</div>
<div class="col-5 col-md-12 mt-md-auto d-flex flex-column flex-md-row justify-content-end justify-content-md-between progress-action">
<span class="progress-badge paid"><i class="lmp-icon icon-sm" aria-hidden="true">check_circle</i> Paid</span>
</div>
</div>
</div>
</div>
</div>
<!-- Unpaid Example -->
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col-md-8 card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list active">
<li>Active</li>
<li>Flight Training</li>
</ul>
<h4 class="font-weight-normal"><a href="#">(737) 737 MAX to 727NG Differences</a></h4>
<ul class="lmp-inline-bullet">
<li>Differences</li>
<li>737 - MAX</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product #100178895</li>
<li>TP ID #1234567</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Gatwick</li>
<li>1 Jul 2020 - 4 Aug 2020</li>
<li>2 Participants</li>
</ul>
</div>
<div class="col-md-4 card-progress">
<div class="row h-100">
<div class="col-7 col-md-12">
<h5 class="progress-label">Course Progress</h5>
<div class="prog-val">80%</div>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</div>
<div class="col-5 col-md-12 mt-md-auto d-flex flex-column flex-md-row justify-content-end justify-content-md-between progress-action">
<span class="progress-badge unpaid"><i class="lmp-icon icon-sm" aria-hidden="true">error</i> Unpaid</span>
<a href="#" class="">View Invoice</a>
</div>
</div>
</div>
</div>
</div>
Upcoming Flight Training Card
<!-- Paid Example -->
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col-md-8 card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list active">
<li>Upcoming</li>
<li>Flight Training</li>
</ul>
<h4 class="font-weight-normal"><a href="#">(787) Air Canada Type Rating with LOFT, CATT II/III</a></h4>
<ul class="lmp-inline-bullet">
<li>Type Rating</li>
<li>787 - 8/9/10</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product #100178895</li>
<li>TP ID #1234567</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Miami</li>
<li>27 Oct 2020 - 11 Nov 2020</li>
<li>2 Participants</li>
</ul>
</div>
<div class="col-md-4 card-progress">
<div class="row h-100">
<div class="col-7 col-md-12">
<h5 class="progress-label">Completed prep items</h5>
<div class="prog-val">1 of 4</div>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</div>
<div class="col-5 col-md-12 mt-md-auto d-flex flex-column flex-md-row justify-content-end justify-content-md-between progress-action">
<span class="progress-badge paid"><i class="lmp-icon icon-sm" aria-hidden="true">check_circle</i> Paid</span>
</div>
</div>
</div>
</div>
</div>
<!-- Unpaid Example -->
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col-md-8 card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list active">
<li>Upcoming</li>
<li>Flight Training</li>
</ul>
<h4 class="font-weight-normal"><a href="#">(737) 737 MAX to 727NG Differences</a></h4>
<ul class="lmp-inline-bullet">
<li>Differences</li>
<li>737 - MAX</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product #100178895</li>
<li>TP ID #1234567</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Gatwick</li>
<li>31 Oct 2020 - 8 Nov 2020</li>
<li>2 Participants</li>
</ul>
</div>
<div class="col-md-4 card-progress">
<div class="row h-100">
<div class="col-7 col-md-12">
<h5 class="progress-label">Completed prep items</h5>
<div class="prog-val">0 of 5</div>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</div>
<div class="col-5 col-md-12 mt-md-auto d-flex flex-column flex-md-row justify-content-end justify-content-md-between progress-action">
<span class="progress-badge unpaid"><i class="lmp-icon icon-sm" aria-hidden="true">error</i> Unpaid</span>
<a href="#" class="">View Invoice</a>
</div>
</div>
</div>
</div>
</div>
Completed Flight Training Card
<!-- Paid Example -->
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col-md-8 card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list complete">
<li>Complete</li>
<li>Flight Training</li>
</ul>
<h4 class="font-weight-normal"><a href="#">(787) Air Canada Type Rating with LOFT, CATT II/III</a></h4>
<ul class="lmp-inline-bullet">
<li>Type Rating</li>
<li>787 - 8/9/10</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product #100178895</li>
<li>TP ID #1234567</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Miami</li>
<li>10 Mar 2020 - 1 Apr 2020</li>
<li>2 Participants</li>
</ul>
</div>
<div class="col-md-4 card-progress">
<div class="row h-100">
<div class="col-7 col-md-12">
<h5 class="progress-label">Course Progress</h5>
<div class="prog-val">Complete</div>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</div>
<div class="col-5 col-md-12 mt-md-auto d-flex flex-column flex-md-row justify-content-end justify-content-md-between progress-action">
<span class="progress-badge paid"><i class="lmp-icon icon-sm" aria-hidden="true">check_circle</i> Paid</span>
</div>
</div>
</div>
</div>
</div>
<!-- Unpaid Example -->
<div class="lmp-card-fltr">
<div class="row no-gutters">
<div class="col-md-8 card-details">
<div class="p-3 pt-md-4 pb-md-2">
<ul class="lmp-tag-list complete">
<li>Complete</li>
<li>Flight Training</li>
</ul>
<h4 class="font-weight-normal"><a href="#">(747) Recurrent Training and Proficiency Check</a></h4>
<ul class="lmp-inline-bullet">
<li>Recurrent</li>
<li>747</li>
</ul>
<ul class="lmp-inline-bullet">
<li>Product #100178895</li>
<li>TP ID #1234567</li>
</ul>
</div>
<ul class="lmp-outlined">
<li>Gatwick</li>
<li>16 Apr 2020 - 30 Apr 2020</li>
<li>2 Participants</li>
</ul>
</div>
<div class="col-md-4 card-progress">
<div class="row h-100">
<div class="col-7 col-md-12">
<h5 class="progress-label">Course Progress</h5>
<div class="prog-val">Complete</div>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</div>
<div class="col-5 col-md-12 mt-md-auto d-flex flex-column flex-md-row justify-content-end justify-content-md-between progress-action">
<span class="progress-badge unpaid"><i class="lmp-icon icon-sm" aria-hidden="true">error</i> Unpaid</span>
<a href="#" class="">View Invoice</a>
</div>
</div>
</div>
</div>
</div>