Gizra - Home Assignment FE Tickets for the News component

News-FE-1

FE-1: Build News Card Component

**Type:** Frontend  
**Priority:** High

**Description:**  
Implement the News card UI per Figma specifications.

**Includes:**
- Featured image
- Title (linked)
- Excerpt text
- Publish date
- CTA icon/button

**Requirements:**
- Responsive layout
- CSS-based text truncation
- Hover and focus states
- Accessible markup

**Acceptance Criteria:**
- Matches Figma spacing and typography
- Handles variable content lengths
- Keyboard accessible

News-FE-2

FE-2: Implement Carousel Functionality

**Type:** Frontend  
**Priority:** High

**Description:**  
Add carousel interaction to the News component.

**Requirements:**
- Horizontal scrolling
- Pagination dots
- Left/right navigation arrows
- Touch/drag support
- Keyboard navigation

**Technical Notes:**
- Use approved JS library (Swiper, Glide, or equivalent)
- Progressive enhancement (no JS = stacked cards)

**Acceptance Criteria:**
- Navigation and pagination function correctly
- No layout shift on load

News-FE-3

FE-3: Integrate View with Frontend Component

**Type:** Frontend / Drupal  
**Priority:** High

**Description:**  
Wire Drupal View output into the News Card + Carousel components.

**Requirements:**
- Twig maps View fields to component structure
- No hard-coded content
- Supports variable number of items

**Acceptance Criteria:**
- Content updates reflect automatically
- Handles fewer items gracefully

News-FE-4

FE-4: Responsive & Cross-Browser QA

**Type:** Frontend QA  
**Priority:** Medium

**Description:**  
Validate responsive behavior and browser compatibility.

**Acceptance Criteria:**
- Mobile: 1 card per view
- Tablet: 2 cards per view
- Desktop: 3 cards per view
- Tested in Chrome, Firefox, Safari, Edge
- No layout break with long titles or missing images

Please refer to this image when generating the News view.

For responsive versions: