Alternative Case Study Card Component Test
Single Alternative Card Example
3-Column Grid Example
2-Column Layout with Manual Column Control
Alternative cards are manually placed in specific columns with tight vertical stacking.
Mixed Layout - Regular and Alternative Cards
Combining both regular case study cards and alternative cards in the same layout.
Custom Web App for Creator Monetization
A platform that transforms social media engagement into reliable passive income for content creators through innovative ad revenue sharing.
Web Development Custom CMS Creator Platform
E-commerce Platform Redesign
Complete overhaul of an existing e-commerce platform, improving user experience and increasing conversion rates by 40%.
UI/UX Design Frontend Development Performance Optimization
How to Use the Alternative Case Study Card Component
Include the component in your Jekyll templates using:
{% include case-study-card-alt.html
logo_path="/path/to/logo.png"
headline="Your Case Study Title"
image_path="/path/to/product-screenshot.png"
services="Service 1,Service 2,Service 3"
link="/case-studies/your-case-study"
%}Parameters:
- logo_path: Path to the company/client logo image
- headline: Main title for the case study (full text displayed)
- image_path: Path to the product/app screenshot image (displayed on right side)
- services: Comma-separated list of services (hidden, used for filtering)
- link: Optional link to the full case study page
Layout Options:
- case-study-cards-alt-grid: 3-column responsive grid for alternative cards
- case-study-cards-alt-2col: 2-column layout with manual column control
- case-study-cards-mixed: Mix regular and alternative cards in the same layout
Key Features:
- Horizontal Split Layout: Content on left (60%), image on right (40%)
- Hidden Services Data: Services are stored in data-services attribute for filtering
- "View Success Story" CTA: With 2 o'clock arrow direction
- Aspect Ratio Constraint: Cards never exceed square proportions
- Responsive Design: Stacks vertically on mobile, horizontal on desktop
- Hover Effects: Arrow animation and color changes
- Mixed Layout Support: Can be combined with regular case study cards
Design Differences from Regular Cards:
- No Description Text: Replaced with product image
- No Service Tags: Services are hidden but preserved for filtering
- CTA Instead of Tags: "View Success Story" with directional arrow
- Image Background: Subtle gradient background for product screenshots
The services parameter is still important as it will be used for filtering functionality in the future case studies page. The services are stored in the data-services attribute but not visually displayed.