---
title: "EXPANDABLE SERVICES — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Mohammad Rafat · Sections. Premium Interactive Service Cards"
canonical: "https://framer.elliotli.dev/component/expandable-services"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/EXPANDABLE SERVICES

# EXPANDABLE SERVICES

Premium Interactive Service Cards

[View on Framer](https://framer.com/marketplace/components/expandable-services/?via=elliot-li)

![EXPANDABLE SERVICES preview image 1](https://framer.elliotli.dev/og/component/expandable-services/1c8591072fa2c551/1600x1200.jpg)

## Summary

Premium Interactive Service Cards

## Description

**Universal Service Card Component**

Modular service tier system for agencies, studios, and creators. Pairs upfront pricing metrics with spring accordions that reveal full deliverables on hover or tap without layout shift.

**Features**

• 4-Side Laser Shimmer: Synchronized perimeter beams travel clockwise on hover.

• Spring Accordion: Deliverables expand smoothly via Animate Presence.

• Monospace Metrics: Tabular slots for rates, timelines, or SLA callouts.

• 3-Tier Icon Engine: Supports 12+ vector presets, image uploads, or raw inline SVG.

• Reactive Glow Shader: Backdrop radial blur dynamically matches active card accents.

• Tactile Hardware: Optional corner screws, circuit PCB grid, and pulsing status LED.

• Touch-Optimized: Switches from hover to tap-to-expand on touch devices.

• Responsive Grid: Fluid column reflow across desktop, tablet, and mobile.

Customization Options Configure everything in Framer’s properties sidebar without code:

• Grid & Density: 1–4 columns on desktop, 1–3 on tablet, plus background color.

• Hardware Toggles: Show/hide corner screws, PCB grid, and adjust glow blur/opacity.

• Color Tokens: Global accent fallback, per-card accents, and text colors.

• Card Content: Custom titles, summaries, paired metrics, CTA labels, and links.

• Sub-Services: Up to 4 expandable line items per card with details and badges.

**How to Use**

1.  Paste: Copy into your project or duplicate via Remix link.
    
2.  Layout: Place in an auto-layout stack (Width: Fill 100%, Height: Fit Content).
    
3.  Customize: Edit copy, deliverables, and colors in Framer’s sidebar.
    
4.  Publish: Test hover and tap states, then launch.
    

**Use Cases**

• Design Studios: Package design systems, UI/UX sprints, and retainer tiers.

• Web Developers: Showcase full-stack builds, APIs, and CMS migrations.

• Freelancers: Package fixed-scope sprints with upfront rates to qualify leads.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2520

## Details

- **Author**: Mohammad Rafat
- **Price**: $12.00
- **Published**: 2026-09-10
- **Updated**: 2026-09-25
- **Added**: 2026-09-10
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove