Team With Hiring CTA

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

Related Section Templates

44 sectionsView all →
1–5 of 44
Team

Team With Hiring CTA

Responsive · Animated
Team

Team Grid

Responsive · Animated
Team

Team Carousel

Responsive · Animated
Hero

SaaS Split Hero

Responsive · Animated
Hero

App Product Hero

Responsive · Animated

Team With Hiring CTA — Free Website Section Template

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

CategoryTeam
Tagsteamcareershiringjobsavatarsculturelight
Updated October 20, 2026

What's included

Features

Team photo mosaic with a “+ more” bubble
“We’re hiring” card with pulsing dot, perks and open roles
Roles written as “Role · Location | URL” lines
Perks as a checklist; hiring card can be switched off
Names used as photo alt text
Card moves below the team on narrow widths
SplitText heading and rising card on scroll
Export HTML, a ZIP, React or Vue

About this section

Team With Hiring CTA — Free Careers Section Template

Team With Hiring CTA: A culture-and-careers section: on the left a heading, short text and a mosaic of round team photos with a “+ more” bubble; on the right a “We’re hiring” card listing perks and open roles (each linking to its job page) with a button to the careers page.

Team With Hiring CTA combines culture and recruiting in one section. On the left: a heading, a few lines about how your team works and a playful mosaic of round team photos ending with a "+32" bubble. On the right: a "We're hiring" card with a pulsing dot, a short list of perks, your open roles (each linking to its job page) and a button to the full careers page.

Roles in seconds

Write open roles one per line as Role · Location | URL, for example Backend Engineer · Europe | /careers/backend/. Each becomes a row with a sliding arrow. Perks are typed one per line with check marks. Switch the whole hiring card off when you're not recruiting.

Faces of the team

Add up to twelve photos; each person's name becomes the photo's alt text. The "more" bubble shows how many others are on the team, or leave it empty to hide it.

Responsive and animated

On tablets and phones the hiring card moves below the team. The heading reveals with GSAP SplitText, the faces fade in and the card rises into place on scroll.

Export it

Download HTML, a ZIP, React or Vue, or fork into My Code. Pair it with the Team Grid on your about page.

Why use it

Why Use the Team With Hiring CTA

🤝
Culture plus action
Candidates see the people they would work with and the jobs they can apply for in one place.
⚡
Quick to update
Adding or closing a role is a one-line change.
●
Signals momentum
A live “we’re hiring” card tells every visitor the company is growing.

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, team photos and hiring card in the panel. Switch the hiring card on or off. 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

💼
Careers page header
Open your careers page with the team mosaic, your best perks and links to every open role.
🏢
About page
End the about page with a recruiting card so interested readers can apply straight away.
🚀
Startup homepage
Recruit early hires by showing the founding team and two or three key roles.
🌍
Remote company
Highlight remote-friendly perks and list roles by region or time zone.

Got questions?

Frequently Asked Questions

Write one role per line as Role · Location | URL, for example Product Designer · Remote | /careers/designer/. Each line becomes a linked row with an arrow.

Yes. Switch the Hiring card group off and only the team section remains.

Up to twelve, plus an optional “+N” bubble for the rest of the team.

Any URL works: your own careers pages, or job posts on Ashby, Greenhouse, Lever, Workable or LinkedIn.

It saves an editable copy of your Team With Hiring CTA 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.