Program Card

A Program Card is used to showcase different programs, courses, or offerings in a structured and visually appealing way. It usually includes an image, title, description, and a CTA (Call-To-Action) button.

Landing Page Program Card With SEO Image Clickable

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="program-card--container">
   <div class="program-card--box">
     <a target="_blank" href="https://example.com?utm_source=utm_source " rel="noreferrer" style="pointer-events: auto;">
       <article>
         <figure class="program-card--image">
           <img alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit" title="Program seo Title" src="./assets/component-images/program-card.svg" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;">
           <div class="school--logo"><img alt="Program Logo Alt Text" title="Program Logo Title" src="./assets/component-images/160*40px-logo.svg" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"></div>
         </figure>
         <div class="card--details p-x-10">
           <p class="school--name para--three m-b-10">Lorem Ipsum</p>
           <header class="program--name medium-text-2 m-b-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit</header>
           <aside class="program--duration para--four m-b-10">XX lorem  | ipsum</aside>
           <aside class="program--date para--four m-b-0 gray-dark-color">Lorem ipsum <span class="bold">Month-Date-Year</span></aside>
         </div>
       </article>
     </a>
   </div>
 </div>