# Course Card Grid Category: showcase Description: Presents multiple courses or articles in a grid of visually appealing cards, each with key details and actions. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) ## SenangStart CSS Code ```html <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-x:auto m-y:large tw-lg:m-y:big-3x"> <h1 visual="font:tw-bold text-size:giant">More Courses</h1> <div layout="grid tw-lg:grid-cols:3" space="m-t:medium tw-lg:m-t:large g:medium"> <div layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4> <p visual="text-size:small">3 Days</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="flex" space="m-b:medium"> <a href="#" layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium" >View</a > <div space="w:small"></div> <a href="#" layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium" >Buy</a > </div> <p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t"> Bootcamp </p> </div> </div> <div layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4> <p visual="text-size:small">3 Days</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="flex" space="m-b:medium"> <a href="#" layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium" >View</a > <div space="w:small"></div> <a href="#" layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium" >Buy</a > </div> <p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t"> Bootcamp </p> </div> </div> <div layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4> <p visual="text-size:small">3 Days</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="flex" space="m-b:medium"> <a href="#" layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium" >View</a > <div space="w:small"></div> <a href="#" layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium" >Buy</a > </div> <p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t"> Bootcamp </p> </div> </div> </div> </section> ``` ## Tailwind CSS Code ```html <section class="px-6 lg:px-16 container mx-auto my-8 lg:my-16"> <h1 class="font-bold text-4xl">More Courses</h1> <div class="grid lg:grid-cols-3 mt-4 lg:mt-8 gap-4"> <div class="bg-gray-200 rounded-lg p-4 flex flex-col" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div class="text-center"> <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4> <p class="text-sm">3 Days</p> </div> <div class="flex-grow h-80"></div> <div> <div class="flex mb-4"> <a href="#" class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow" >View</a > <div class="w-2"></div> <a href="#" class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg" >Buy</a > </div> <p class="pt-4 border-t border-neutral-200 text-center text-xs"> Bootcamp </p> </div> </div> <div class="bg-gray-200 rounded-lg p-4 flex flex-col" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div class="text-center"> <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4> <p class="text-sm">3 Days</p> </div> <div class="flex-grow h-80"></div> <div> <div class="flex mb-4"> <a href="#" class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow" >View</a > <div class="w-2"></div> <a href="#" class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg" >Buy</a > </div> <p class="pt-4 border-t border-neutral-200 text-center text-xs"> Bootcamp </p> </div> </div> <div class="bg-gray-200 rounded-lg p-4 flex flex-col" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div class="text-center"> <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4> <p class="text-sm">3 Days</p> </div> <div class="flex-grow h-80"></div> <div> <div class="flex mb-4"> <a href="#" class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow" >View</a > <div class="w-2"></div> <a href="#" class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg" >Buy</a > </div> <p class="pt-4 border-t border-neutral-200 text-center text-xs"> Bootcamp </p> </div> </div> </div> </section> ```