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 With SEO Program Card Clickable

Program seo Alt Text

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://mit-xpro-online-education.emeritus.org/professional-certificate-coding?utm_source=udemy&amp;utm_medium=affiliate&amp;utm_content=LP" rel="noreferrer" style="pointer-events: auto;">
      <article>
        <figure class="program-card--image">
          <img alt="Program seo Alt Text" 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>