Category cards are interactive UI elements used to represent different sections, products, or topics. They often include an icon, title, description, and a call-to-action (CTA).
Intro Text goes here when it is at the section level
<div class="container">
<h2 className="large-text-3 text-left">Clickable Category Cards</h2>
<p className="para--two text--left">Intro Text goes here when it is at the section level</p>
<div class="cat-col display--flex">
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_ai-machine-learning" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">AI and Machine Learning</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_business-analytics" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Business Analytics</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_business-management" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Business Management</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_coding" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Coding</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_cybersecurity" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Cybersecurity</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_data-science-and-analytics" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Data Science and Analytics</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_digital-marketing" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Digital Marketing</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_digital-transformation" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Digital Transformation</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_entrepreneurship" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Entrepreneurship</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_finance" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Finance</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_healthcare" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Healthcare</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_human-resources" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Human Resources</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_leadership" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Leadership</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_product-design-and-innovation" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Product Design and Innovation</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_project-management" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Project Management</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_sales-and-marketing" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Sales and Marketing</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_strategy-and-innovation" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Strategy and Innovation</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_supply-chain" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Supply Chain and Operations</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_sustainablity" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Sustainability</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
<div class="program-cat">
<a href="#">
<div class="program-cat--card p-y-20 display--flex">
<div class="program-cat--program-picture text-reverse justify--center">
<span class="category-icon blueprint-icon icon-category_technology" />
</div>
<div class="program-cat--program-content justify--center display--flex">
<div class="small-text-1 text-weight-bold title">Technology</div>
<div class="para--three program-number">34 Programs</div>
</div>
</div>
</a>
</div>
</div>
</div>