Feature Grid #13

2025-08-27T16:37:15Z

an.di commented

2025-08-27 16:37:15 +00:00

Add FeatureGrid Component with MiniCard and ContentLockup Variants

Overview

This PR introduces a new FeatureGrid component that displays feature tools and services in a responsive grid layout, along with supporting subcomponents and enhancements to existing components.

Components Added/Modified

New Components

FeatureGrid - Main component with responsive layout (2x2 mobile, 1x4 tablet/desktop)
MiniCard - Feature card component with colored backgrounds and two-line labels

Enhanced Components

ContentLockup - Added feature variant with white text and link support

Key Features

FeatureGrid

Responsive layout: 2x2 grid on mobile, 1x4 on tablet/desktop
Horizontal layout at lg breakpoint with ContentLockup on left, MiniCard grid on right
Dark background (#171717) with rounded corners
Proper accessibility with ARIA labels and keyboard navigation
Container queries for flexible sizing

MiniCard

Fixed height (186px) with colored background panels
Two-line white labels with consistent spacing
Icon support with maintained aspect ratios
Interactive states (hover, focus) with keyboard navigation
Multiple rendering modes: link, button, or static div

ContentLockup Feature Variant

White text (Bricolage 500 32px title, Space Grotesk 400 20px subtitle)
12px gap between elements
Optional underlined link (Inter 500 16px)
No decorative shape (removed for feature variant)

Screenshots

Screenshot 2025-08-27 at 10.33.03 AM.png

Screenshot 2025-08-27 at 10.33.33 AM.png

Screenshot 2025-08-27 at 10.37.04 AM.png

Technical Implementation

Responsive Design

Uses CSS Grid with grid-cols-2 md:grid-cols-4
Container queries with [container-type:inline-size]
Flexible sizing with clamp() and calc() for optimal layout
MiniCards maintain minimum width (106px) while expanding with available space

Accessibility

Proper ARIA labels and roles
Focus indicators with brand color rings
Keyboard navigation support (Enter/Space keys)
Semantic HTML structure with <section> element

Styling

Consistent use of design tokens for spacing and colors
Multi-colored noise textures on SVG icons
Hover states with scale transforms
Focus states with ring indicators

Testing

Component tested across all breakpoints
Accessibility verified with keyboard navigation
Storybook stories created for documentation
Visual consistency checked with design system

# Add FeatureGrid Component with MiniCard and ContentLockup Variants ## Overview This PR introduces a new `FeatureGrid` component that displays feature tools and services in a responsive grid layout, along with supporting subcomponents and enhancements to existing components. ## Components Added/Modified ### New Components - **`FeatureGrid`** - Main component with responsive layout (2x2 mobile, 1x4 tablet/desktop) - **`MiniCard`** - Feature card component with colored backgrounds and two-line labels ### Enhanced Components - **`ContentLockup`** - Added `feature` variant with white text and link support ## Key Features ### FeatureGrid - Responsive layout: 2x2 grid on mobile, 1x4 on tablet/desktop - Horizontal layout at `lg` breakpoint with ContentLockup on left, MiniCard grid on right - Dark background (`#171717`) with rounded corners - Proper accessibility with ARIA labels and keyboard navigation - Container queries for flexible sizing ### MiniCard - Fixed height (186px) with colored background panels - Two-line white labels with consistent spacing - Icon support with maintained aspect ratios - Interactive states (hover, focus) with keyboard navigation - Multiple rendering modes: link, button, or static div ### ContentLockup Feature Variant - White text (Bricolage 500 32px title, Space Grotesk 400 20px subtitle) - 12px gap between elements - Optional underlined link (Inter 500 16px) - No decorative shape (removed for feature variant) ### Screenshots <img width="426" alt="Screenshot 2025-08-27 at 10.33.03 AM.png" src="attachments/e232935f-96f7-4154-a083-a79954b9fbfc"> <img width="620" alt="Screenshot 2025-08-27 at 10.33.33 AM.png" src="attachments/4ea5d99b-1de8-44c3-8708-b05c9e08c9c8"> <img width="948" alt="Screenshot 2025-08-27 at 10.37.04 AM.png" src="attachments/8de47c9c-c456-4fb1-9841-1ce71a1ec2b8"> ## Technical Implementation ### Responsive Design - Uses CSS Grid with `grid-cols-2 md:grid-cols-4` - Container queries with `[container-type:inline-size]` - Flexible sizing with `clamp()` and `calc()` for optimal layout - MiniCards maintain minimum width (106px) while expanding with available space ### Accessibility - Proper ARIA labels and roles - Focus indicators with brand color rings - Keyboard navigation support (Enter/Space keys) - Semantic HTML structure with `<section>` element ### Styling - Consistent use of design tokens for spacing and colors - Multi-colored noise textures on SVG icons - Hover states with scale transforms - Focus states with ring indicators ## Testing - Component tested across all breakpoints - Accessibility verified with keyboard navigation - Storybook stories created for documentation - Visual consistency checked with design system

Screenshot 2025-08-27 at 10.33.03 AM.png

123 KiB

Screenshot 2025-08-27 at 10.33.33 AM.png

121 KiB

Screenshot 2025-08-27 at 10.37.04 AM.png

138 KiB

an.di added 11 commits 2025-08-27 16:37:16 +00:00

Feature Grid default breakpoint 9e49c66611

Update noise texture 3f3c2d9b3b

Feature Grid md breakpoint 81a5bd1699

Feature Grid xl breakpoint b789dc595e

Add interactivity and accessibility 77882079e8