This service cards UI is a compact row of four cards with a tinted header strip and a star icon. It works well when you have a short list of main services.

When you only have a few services, fewer and larger cards read better. This version places four cards in one row with a coloured header strip and a short description beneath. The matching title colour gives each card its own identity while the grid stays orderly. It fits well under a hero section or inside a long landing page. The simple structure also makes it easy to turn into a component, so you can reuse it on several pages. More card layouts are in Buttons and Cards.

What you get

• A "What we do" label, a heading and an intro line
• Four equal cards in a single row
• A tinted top band on each card in pink, blue, violet or teal
• A coloured title that matches the band and a three-line description
• A white panel that keeps the cards in focus

How to use it in Figma

Press the copy button, then paste into Figma with Ctrl or Cmd + V. Swap the stars for your own icons, rewrite the titles and set the colours to your palette. Make the cards wider or narrower as needed.

Best for

• Homepage service overviews
• Landing pages for agencies and consultants
• Pricing or plan intros
• Feature summaries in pitch decks

Customisation tips

• Keep the title to two words or fewer.
• Match the title colour to the card band for a cohesive look.
• Need six items? Use the services section with six cards.