Contact Options Cards

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–5 of 44
Contact

Contact Options Cards

Responsive · Animated
Contact

Contact Form With Details

Responsive · Animated
Contact

Contact With Map

Responsive · Animated
Features

Bento Grid Features

Responsive · Animated
Pricing

Dark Glow Pricing

Responsive · Animated

Contact Options Cards — Free Website Section Template

Contact · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryContact
Tagscontactsupportsalescardshelpoptionsdark
Updated October 20, 2026

What's included

Features

Cards for sales, support, partnerships, press or any team
Icon, description, response-time note and link per card
Links to pages, mailto: or chat; long emails wrap
Up to 6 cards: add, duplicate, reorder, remove
Green “online” dot on response-time notes
Cards lift and highlight on hover
Dark theme; any preset or brand kit
Export HTML, a ZIP, React or Vue

About this section

Contact Options Cards — Free Sales and Support Section Template

Contact Options Cards: A “How can we help?” section that sends each visitor to the right place: cards for sales, support, partnerships and press, each with an icon, a short description, a response-time note and its own button or email link. Clean on a dark theme, and it stacks neatly on phones.

Contact Options Cards sends each visitor to the right team. Under a "How can we help?" heading, cards for sales, support, partnerships and press each have an icon, a short description, a response-time note with a green "online" dot and a link, such as a booking page, help centre or email address.

Fewer misrouted messages

Separating sales from support means prospects reach someone who can talk pricing and customers reach someone who can fix problems, and both know how quickly they'll hear back.

Flexible options

Add up to six cards and reorder them. Each card's link can be a page, a mailto: address or a chat link, and long email addresses wrap neatly. Leave the note empty to hide it. Choose icons from the built-in set.

Dark and calm

It ships in a deep teal-black with a mint accent; cards lift and highlight on hover. Switch presets or apply your brand kit to match your site. The heading reveals with GSAP SplitText and the cards stagger in on scroll.

Export it

Download HTML, a ZIP, React or Vue, or fork into My Code. Pair it with a form from Contact Form With Details.

Why use it

Why Use the Contact Options Cards

🧭
Right team, first time
Visitors choose the team that fits, so they get the right answer faster.
⏱
Sets expectations
Response-time notes tell people when to expect a reply.
⚙
No form needed
Each card links to the tool that team already uses: a booking page, help centre or inbox.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and options in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🚀
SaaS contact page
Offer "Book a demo" for sales, "Open help centre" for support and a partnerships email.
🏢
Company with departments
Route visitors to HR, sales, billing and media relations from one page.
📰
Press and media
Give journalists a direct press contact and a link to your press kit.
🛟
Help page header
Start a help page with options for docs, community forum, email support and status.

Got questions?

Frequently Asked Questions

Yes. Each card has its own link text and URL: a page, a mailto: address, a tel: number or a chat link.

Up to six. Three or four usually works best; the grid wraps automatically.

Yes. Leave the note empty and it disappears, including the green dot.

Yes. Choose a light colour preset or apply your brand kit; the cards and accents follow the theme.

It saves an editable copy of your Contact Options Cards in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.