Case Study Card Component Test
Single Card Example
Custom Web App for Creator Monetization
Launched in early 2024, BiteSlice partnered with Twin Sun to transform a proof of concept into a fully functional platform for creators. We built a custom web app for content creators and a tailored CMS for BiteSlice's team, making it easy to manage everything in the backend. The platform gives creators a new way to monetize their social media presence, paying them 75% of ad revenue from ads displayed alongside their content — turning engagement into a reliable passive income stream.
3-Column Grid Example
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.
E-commerce Platform Redesign
Complete overhaul of an existing e-commerce platform, improving user experience and increasing conversion rates by 40%.
Mobile App for Healthcare Startup
Built a comprehensive mobile application for a healthcare startup, enabling patients to connect with healthcare providers seamlessly.
2-Column Layout with Manual Column Control
Cards are manually placed in specific columns and "butted up" against each other with minimal gaps.
Building a Unique Movie Review Experience
Short description for a compact card.
Custom Web App for Creator Monetization
Launched in early 2024, BiteSlice partnered with Twin Sun to transform a proof of concept into a fully functional platform for creators. We built a custom web app for content creators and a tailored CMS for BiteSlice's team, making it easy to manage everything in the backend. The platform gives creators a new way to monetize their social media presence, paying them 75% of ad revenue from ads displayed alongside their content — turning engagement into a reliable passive income stream.
Bringing Mental Health Support to More Veterans
Compact card with shorter content.
Rescuing and Relaunching a Troubled App
Medium-length description for this case study.
Connecting Nashville to Live Music Events
Built a platform connecting music lovers to live events.
Ongoing WordPress Support for Site Stability
Lorem ipsum dolor sit amet consectetur. Eu ultrices consectetur enim viverra turpis vitae. Amet morbi arcu enim consectetur ultricorper. Porttitor libero turpis tortor et. Sit arcu nunc quam diam nisl in congue amet. Ultricorper mauris aliquet sapien pulvinar vitae donec. Praesent viverra metus mattis amet. Consequat purus in vitae neque est congue ultricies. Curabitur blandit pulvinar lectus dignissim tincidunt mauris.
How to Use the Case Study Card Component
Include the component in your Jekyll templates using:
{% include case-study-card.html
logo_path="/path/to/logo.png"
headline="Your Case Study Title"
description="Description of the case study..."
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 (truncated to 2 lines)
- description: Brief description of the project (truncated to 4 lines)
- services: Comma-separated list of services (rendered as individual squircles)
- link: Optional link to the full case study page
Layout Options:
- case-study-cards-grid: 3-column responsive grid (1 col mobile, 2 col tablet, 3 col desktop)
- case-study-cards-2col: 2-column layout with manual column control and tight vertical stacking
Manual Column Control:
For the 2-column layout, wrap cards in column divs for precise control:
{% include case-study-card.html ... %}
{% include case-study-card.html ... %}
{% include case-study-card.html ... %}
{% include case-study-card.html ... %}
Key Features:
- Individual Service Tags: Each service is rendered as a separate squircle element
- Aspect Ratio Constraint: Cards never exceed square proportions (max height = width)
- Text Truncation: Headlines and descriptions are automatically truncated to prevent overflow
- Manual Column Placement: Full control over which cards go in which column
- Tight Vertical Stacking: Cards in the same column stack with minimal 16px gaps
- Responsive Design: Adapts beautifully from mobile to desktop
- Hover Effects: Subtle lift animation and enhanced shadows
The services parameter is particularly important as it will be used for filtering functionality in the future case studies page. Each service will be rendered as an individual gray squircle tag.