Every component below uses tokens from system/tokens.css and class names from system/components.css. Copy the markup, keep the class names, and you'll inherit the IGrow brand for free.
Use .ig-btn + one variant. Pill shape comes for free. Primary red is the only "this is the action we want" colour — limit one per surface.
Every form field is a .ig-field wrapping a label + control + optional helper/error. Pair with .ig-field--error or .ig-field--success on the wrapper for state.
A handful of card variants cover 90% of surfaces: generic, property, stat, testimonial.
Property card (matches rentals.igrow.co.za)
R 7 000
1 Unit 309, Cnr Sett Street & Pretoria Rd
Experience the perfect blend of privacy and open-plan living in this cleverly designed apartment…
R 9 100
66 Joslyn Crescent, Fourleaf Estate
This property ticks all the boxes when it comes to a great rental — pets allowed and a private garden.
Cards without media work too — use .ig-card--bordered for the flat, no-shadow variant.
"I had an outstanding experience with Malanie Lewis who went above and beyond to make this process smooth. From the first inquiry she was professional, responsive and genuinely attentive to my needs."
"This is one of the best services I've ever had! I appreciate the professionalism, his work ethic and knowledge is highly recommended."
Photo hero with brand-gradient overlay. Use .ig-hero-section--dark for utility pages (contact, legal) and --compact for sub-pages.
Browse available properties by location, budget, and features — trusted property management across South Africa.
Inverse, full-bleed, single message. Use to bookend a long marketing page.
Speak to a consultant about how IGrow Rentals manages buy-to-let properties from tenant placement to monthly payouts.
Built on native <dialog> + .showModal(). Browser handles focus trap, Escape-to-close, top-layer rendering, and inert on the rest of the page. JS opens it; everything else is free.
Coloured left-border + tinted background. Use for inline page messages. For ephemeral notifications use .ig-toast instead.
Application received
We'll be in touch within one business day.
Lease signed
All parties have signed. Welcome to your new home.
Rent due in 3 days
Payments after the 1st incur a R 150 admin fee.
Could not submit
Please correct the highlighted fields and try again.
Built on native <details>/<summary> — works without JS, keyboard-accessible by default, no content clipping. Use sparingly — typically on FAQ or single-property pages where space matters.
Pill-styled tabs. Implements the APG tab pattern: ArrowLeft/Right cycles tabs, Home/End jumps to first/last, focused tab uses roving tabindex. Don't use for primary navigation — use the main nav.
The first floor unit offers two bedrooms, two bathrooms, and an open-plan living area with private balcony.
72 m², 2 beds, 2 baths, 1 covered parking bay. North-facing, ground-floor unit.
Floor plan (PDF), Body Corporate rules (PDF), latest BC financials (PDF). Download links provided after a viewing is booked.
No-JS fallback: if you can't ship JavaScript, render each panel as a regular <section id="…"> with a heading, and replace the tab buttons with anchor links to those ids. The page works perfectly without scripting — the user just scrolls to each section instead of switching tabs in place.
Data-dense. Pair with status pills (.ig-pill) for at-a-glance state.
Matches the listing pattern from rentals.igrow.co.za/to-rent/.
Try widening the price range, or clearing the suburb selection to see more results.