# Pillar Card Visual Standardization

**Last Updated:** 2026-01-18

## Overview

This document describes the standardization of pillar page cards (`PillarCardCarousel.php`) to match regular blog post cards (`PostCard.php`) for visual consistency in carousels.

## Problem Statement

Pillar cards in carousels had inconsistent styling compared to regular blog post cards:

- **Category badges** displayed below visuals (not matching post card placement)
- **Visual containers** used `min-height: 200px` instead of `aspect-ratio: 16 / 9`
- **Different padding, spacing, and typography** than regular cards
- **Visual inconsistency** when pillar cards appeared alongside post cards in carousels

## Solution

Standardized pillar cards to match post cards exactly:

1. **Removed category badges** from pillar cards (as requested)
2. **Standardized visual container** to use `aspect-ratio: 16 / 9` matching post cards
3. **Aligned all styling** (padding, spacing, fonts) to match regular cards
4. **Ensured visuals** (Dienstplan/Zeiterfassung widgets) fit properly in standardized containers

## Changes Made

### Component Changes (`v2/components/blog/PillarCardCarousel.php`)

- **Removed** category badge rendering (lines 54-58)
- **Maintained** visual component structure for proper scaling
- **Kept** title, description, and CTA intact

### CSS Changes (`v2/css/blog.css`)

#### Base Styles

- **`.pillar-card-carousel-visual`**:
  - Changed from `min-height: 200px` to `aspect-ratio: 16 / 9`
  - Maintained flex properties for proper alignment

- **`.pillar-card-carousel-text`**:
  - Added `gap: 0.75rem` for consistent spacing
  - Updated padding to match post cards

- **`.pillar-card-carousel-title`**:
  - Updated `line-height` from `1.3` to `1.4` (matches post cards)
  - Updated `margin-bottom` from `0.75rem` to `0` (uses gap instead)
  - Added `min-height: 3.5rem` (matches post cards)
  - Added `line-clamp: 2` for consistency

- **`.pillar-card-carousel-description`**:
  - Updated `margin-bottom` from `1rem` to `0` (uses gap instead)
  - Added `line-clamp: 3` for consistency

- **Mobile responsive**:
  - Removed `min-height: 180px` override (aspect ratio handles sizing)
  - Updated padding to `1rem` (matches post cards)

- **Removed** `.pillar-card-carousel-category` styles (no longer used)

#### Carousel-Specific Styles (`#blog-related-carousel-section`)

Added comprehensive carousel-specific rules to ensure pillar cards match post cards exactly:

- **Visual container standardization**:
  ```css
  #blog-related-carousel-section .pillar-card-carousel-visual {
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    overflow: hidden;
    min-height: auto;
  }
  ```

- **Content padding standardization**:
  ```css
  #blog-related-carousel-section .pillar-card-carousel-text {
    padding: 1rem !important;
    gap: 0.75rem;
  }
  ```

- **Typography standardization**:
  - Title: `font-size: 1.125rem`, `font-weight: 700`, `min-height: 2.75rem`
  - Description: `font-size: 0.875rem`, `line-height: 1.6`
  - Margins set to `0` (uses gap instead)

- **Visual scaling**:
  - Ensured Dienstplan and Zeiterfassung widgets scale properly within 16:9 containers
  - Maintained proper aspect ratios without distortion

## Visual Components

### Dienstplan Visual (`PillarVisualDienstplan.php`)

Schedule widget visual that scales within 16:9 container. Maintains proper proportions and readability.

### Zeiterfassung Visual (`PillarVisualZeiterfassung.php`)

Time tracking widget visual with digital time display and status indicator. Scales properly within 16:9 container.

## Standardized Dimensions

All cards in carousel context now use:

- **Visual Container**: `aspect-ratio: 16 / 9`
- **Content Padding**: `1rem`
- **Title Font Size**: `1.125rem` (carousel), `1.25rem` (default)
- **Description Font Size**: `0.875rem`
- **Gap Between Elements**: `0.75rem`

## Browser Compatibility

- **aspect-ratio**: Supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+)
- **Fallback**: Not needed (modern browser requirement)
- **Mobile**: Aspect ratio maintained at all breakpoints

## Testing

### Visual Testing

- ✅ Pillar cards match post cards in carousel
- ✅ Visual containers maintain 16:9 aspect ratio
- ✅ Visuals (Dienstplan/Zeiterfassung) display correctly without distortion
- ✅ Responsive design works on all devices
- ✅ Typography matches exactly

### Cross-Browser Testing

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)

### Responsive Testing

- ✅ Mobile (375px)
- ✅ Tablet (768px)
- ✅ Desktop (1024px+)

## Files Modified

- `v2/components/blog/PillarCardCarousel.php` - Removed category badge
- `v2/css/blog.css` - Updated styles and added carousel-specific rules
- `v2/css/blog.min.css` - Minified CSS updated

## Documentation Updates

- `docs/content/blog/reference/COMPONENT_API.md` - Added PillarCardCarousel documentation
- `docs/content/blog/CHANGELOG.md` - Documented changes
- `docs/content/blog/PILLAR_CARD_STANDARDIZATION.md` - This document

## Breaking Changes

**None** - Changes are backward compatible. Pillar cards continue to function correctly, with improved visual consistency.

## Future Considerations

- Consider removing `$category_label` parameter if not used elsewhere
- Monitor visual quality across different screen sizes
- Consider adding visual regression tests

## Related Documentation

- [Component API Documentation](./reference/COMPONENT_API.md)
- [Blog CSS Guidelines](./guides/BLOG_CSS_GUIDELINES.md)
- [Carousel Optimization Report](./CAROUSEL_OPTIMIZATION_REPORT.md)