Building
We take the lead.
From renovations and upgrades to commercial construction, we manage every stage with a focus on quality, communication and the finished result.
Developer reference — design tokens, typography, buttons, form controls, site chrome and every block with each enum permutation. Diff it against the Figma foundations before building pages. The client-facing real-content library is /style-guide/.
Rendered live on this page from inc/menu.php, inc/banner.php and get_footer(). Scroll up for the real header, down for the real footer. The variants below are described, not reproduced — a static copy drifts from the partial.
inc/menu.phpFixed black bar, height: var(--header-h) (184px / 132px mobile) with a 10px orange bottom stripe (border-bottom). .site-header__inner.u-inset = brand (logo, left on --content-inset) + #mainMenu drawer panel + .site-header__toggler (orange hamburger, right edge on the inset).
header_nav_style) — hamburger at every width; nav slides down in a black full-width panel below the stripe..is-compact.CTA cluster (.site-header__right, inc/buttons.php) — pinned flush to the header's top-right corner: two connected square pills from header_buttons that swap fill/label on hover — --primary rest orange fill / black label → hover white fill / orange label; --phone (any tel: link) rest white fill / black label → hover orange fill / white label. Full-width connected control below 768px.
State classes: .is-scrolled · .is-compact · .menu-open · .js-ready; html.nav-compact-early is set pre-JS in header.php. SVG logo emitted by hand (wp_get_attachment_image() stamps width="1" on SVGs).
Site Options: Header Navigation (header_nav_style) · Header Logo (header_logo, falls back to img/header-logo.svg) · Header Buttons (header_buttons repeater). Menus: main-menu, cta-menu.
inc/banner.phpOne partial, included after the header on every template. Reads the per-page banner repeater; each row picks its own header_layout:
<picture> / MP4 / Vimeo (or a flat black .itemSlide__flat when no media) behind .carousel-caption.banner__caption pinned bottom-left on --content-inset. 10px orange stripe hard against the hero's bottom edge (.itemSlide:not(.headerSolid) border-bottom). image_position drives object-position; .noGrad drops the legibility gradient.<h1.banner__title--xl> (Countach 700, uppercased in CSS, 0.83 leading), rendered if either is set: header_title WYSIWYG → fixed .banner__title-line--lead (multi-<p> still flattened to spans); header_slogan textarea, one phrase per line (a phrase may carry <br> hard breaks) → .banner__slogan wrapping .banner__slogan-item spans. The closing copy is the last slogan phrase — there is no separate fixed tail line. Inner pages emit only --lead = one white line ≈92px. Home (body.FrontPage) styles the lockup in _project.scss — lead orange ≈128px, slogan white ≈64px (min-height: 2.9em = the pre-JS floor for the tallest 3-line phrase).js/scripts.js) — every data-interval ms (3000, set in inc/banner.php) the next .banner__slogan-item rolls in from above while the active one rolls down and fades out (.is-leaving; transform + opacity). JS pins .banner__slogan to the tallest phrase's height so the page never reflows on swap. data-rotate carries the phrase list as JSON (no-JS fallback / source of truth). prefers-reduced-motion → first phrase static, no timer (height is still pinned); pauses on visibilitychange while the tab is hidden, resumes on return..headerSolid flat .bg-* panel + .banner__inset-image beside the caption (unused by DH so far).No rows → .banner-spacer (mirrors --header-h) so content clears the fixed header — this is the Team single's design (no hero). This page has none, so the spacer is what rendered above.
Fields: per-page banner repeater (ACF "Banners" group), not Site Options. Hero photos: designer to confirm licensing + supply final images (currently the flat-black fallback).
footer.phpBlack, 13px orange top stripe. .site-footer__acknowledgement (centred, hairline under it) → .site-footer__panel: __top (logo left + __social right) then __cols — a 4-column grid (--about = address + __phone + __email-btn · --hours · --links = footer-menu · --services = footer-services-menu) → .site-footer__credits (hairline over it; site_credits left, "Website by EnvyUs Design" right, one line). Columns stack 2-up ≤991px, 1-up ≤575px.
Site Options: footer_logo · footer_text (address) · footer_hours · footer_buttons ("Email us" pill) · site_credits ({{year}} → current year) · welcome_to_country. Phone reuses the header_buttons tel: row. Menus: footer-menu (Quick Links), footer-services-menu. Unused by DH: footer_menu_heading, footer_form_heading, footer_form_shortcode, footer_logos.
Raw palette on :root in scss/_colours.scss. Swatches are labelled by token name — replace the values per project, keep the names.
--colour-black
--colour-primary
--colour-primary-hover
--colour-secondary
--colour-surface
--colour-text
--colour-text-inverse
Components read these, never a raw --colour-*. Every .bg-* section class re-points them so text stays legible on that background.
--heading-colour — h1–h6--text-colour — p, ul, ol, body--link-colour — a, .blockEyebrowOne shared column: --content-max (1260px) centred. The .u-inset helper and Bootstrap's .container (capped to --content-max) resolve to the same left/right edge, so the header logo, the footer and every block line up at every width. Align full-bleed elements with .u-inset, or with var(--content-inset) (the derived side-gutter) for absolutely-positioned bits. The image + overlapping-text block is the one intentional exception — it bleeds wider.
.u-inset — its text edge lines up with the container above.Applied per section (ACF Block Settings → Background). Each paints a background and re-points the semantic roles — the heading, paragraph and link below take their colour from the class, with no text-* helper.
Background --colour-primary. Body text and a link re-point automatically.
Background --colour-secondary. Body text and a link re-point automatically.
Background --colour-black. Body text and a link re-point automatically.
Background --colour-surface. Body text and a link re-point automatically.
The band choice — Black / Orange / Grey (rock) / White, plus Black (Pattern) and Grey (Pattern) for the textured concrete overlay — also drives heading, body and button colour. Every block also carries Spacing Top / Spacing Bottom in its Block Settings (Default / None / Small / Medium / Large); set one end to None to close the seam between two same-colour bands into a single run.
Sizes come from the $base-font-sizes map in _fonts.scss via fluid($min, $max) (CSS-locks, 375→1920px). Weights: h1–h3 bold, h4–h6 semibold. No uppercase (caps: false for every level).
Lead paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.
Body text. Vivamus hendrerit arcu sed erat molestie vehicula. Sed hendrerit ad litora torquent per conubia nostra, per inceptos himenaeos.
Small text — footnotes, captions, helper text.
Inline: link, bold, italic, inline code, highlight.
"Good design is as little design as possible."
.blockEyebrow — kicker line
.blockTitle--xl (sizes like h1)
.blockTitle--md (sizes like h2)
.blockTitle--sm (sizes like h3)
Blocks output <h2 class="blockTitle blockTitle--xl"> — heading size without forcing an h1. Add .blockTitle--narrow for the per-tier override in half-width columns. basic_content and form_block have a Title Size option — Large (H1) / Medium (H2) / Small (H3) — that swaps --xl for --md or --sm.
Bootstrap .form-control / .form-select / .form-check. The form_block renders a plugin shortcode; these are the base control styles it inherits.
Markup lifted from inc/newsCard.php and inc/teamCard.php (images swapped for placeholders). The cards block's .featCard lives in section 7.
inc/newsCard.php
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero.
inc/teamCard.phpOn a dark band (grey / black). Orange edge accent + name + role; full block in section 7.
Jane Doe
Operations Manager
All 12 layouts (basic_content, media_feature, cards, cta_band, marquee, testimonials, form_block, logo_slider, accreditations, accordion, gallery_block, team_grid_picker). Each demo uses the markup and classes its blocks/*.php partial emits. Section chrome (background, spacing, container) normally comes from the shared block_settings group.
Section wrapper + background from the shared block_settings group (section-open.php). Eyebrow + title + body + one optional button. Body is capped at a readable measure (~72ch).
What we do
Free-text WYSIWYG content sits in block_content.
Same as oneCol but the body spans the whole column — no readable-measure cap (col-12 without contentPanel__prose).
Title and body both span the whole content column.
title_size = sm drops the spanning title to the .blockTitle--sm (H3 48) scale; on a dark band it takes the section accent (orange). Body spans the full rail. section-pt-none on the block below closes the seam into one black run.
Responsibility goes further out here. Working in the APY Lands brings different environments, logistics and challenges — and the opportunity to deliver work that has a meaningful impact.
Our team works closely with clients, local communities, trades and suppliers to deliver projects safely, respectfully and reliably.
Title (+ optional eyebrow / subtitle) full width over two body columns (column_one / column_two). The spanning title is Figma H2 (not the hero blockTitle--xl scale); on a dark band it takes the section accent (orange).
DH Contracting started in 2019 as a family-owned specialist demolition and asbestos removal business. We focused on working hard, being reliable, communicating openly and doing what we said we would do.
Clients noticed, and as our reputation grew, so did the trust they placed in us.
We were asked to take on more. More responsibility. More coordination. More complex projects. With that extra responsibility, we grew with them.
Today, DH Contracting is a multi-service construction and project management company delivering commercial, government, community and residential projects across South Australia.
Our capabilities have expanded. Our team has grown. Our projects have become bigger and more complex.
But our approach hasn’t changed.
We’re still family-owned. Still hands-on. Still accessible. And still personally invested in delivering the right outcome.
No spanning title (block_title empty) — each column_one / column_two WYSIWYG leads with its own <h3>. On a dark band those column headings take the section accent.
Growth has given us greater capability, but we never want it to create distance between us and our clients.
At DH Contracting, you’re not passed around or left wondering who’s responsible. Our team knows your project. We answer the phone. We keep you informed. We deal with issues when they arise.
It’s a more personal approach to construction, and we intend to keep it that way.
Responsibility builds trust.
We own our decisions, our work and our outcomes.
Communication makes projects better.
We keep conversations honest and straightforward.
Quality is non-negotiable.
We take pride in doing things properly, right down to the very last detail.
Problems are there to be solved.
When challenges arise, we don’t point fingers. We find solutions.
Every project deserves our attention.
Big or small, every job carrying the DH Contracting name matters.
Relationships matter.
We want clients, trades and partners to want to work with us again.
Title + optional subtitle in a col-5 lede beside a col-7 body (column_one). On a dark band the title takes the section accent (orange); the subtitle keeps the band ink.
We’re problem solvers.
Project managers.
Trusted partners.
Since 2019, family-owned DH Contracting has grown from a specialist demolition business into a multi-service construction company delivering commercial, government, community and residential projects across metropolitan and regional South Australia.
We’ve grown, but we’ve stayed hands-on. You deal with people who know your project, understand what needs to happen and care about the outcome. We coordinate the people. Manage the trades. Solve the problems. And keep things moving.
It’s a personal approach, backed by the capability to deliver.
Same split with subtitle empty and no button — the col-5 lede is just the orange blockTitle--xl, the col-7 body carries the copy.
We take care of every stage.
No two projects are the same. Different sites. Different challenges. Different requirements.
That’s why we bring together the right people, skills and experience for each project, giving our clients one accountable team capable of taking care of more. From demolition and site preparation to construction, trades and final delivery, we coordinate the moving parts and take responsibility for the outcome.
layout = overlap: full-width image; block_title + subhead + content render in a card absolutely positioned over one side (≥992px), stacking under the image below that. overlap_card_theme = dark → black card, light ink. image_side = left → card floats right.
Every project has moving parts.
Trades. Timelines. Budgets. Compliance. And the unexpected.
Our job is to bring it all together. With a skilled team and trusted network of trades and subcontractors, we can manage multiple stages of a project under one roof.
Less chasing. Less passing the buck. More accountability.
Every project has moving parts
Default light card. image_side = right → the card floats left.
Every project has moving parts
layout = standard: image and text 50/50; image_side flips them.
card_style = plain → each card takes an orange bottom rule. Per card: title (orange; becomes a link to link when one is set and Show button is off — left plain here, no per-service page yet), subtitle caps sub-line, text. Section more_link renders the centred “All services” pill.
From preparing the site to delivering the finished project, we have the people, experience and capability to take care of more.
We take the lead.
From renovations and upgrades to commercial construction, we manage every stage with a focus on quality, communication and the finished result.
We take it back.
Safe, compliant demolition, asbestos removal and remediation to prepare your site properly for what comes next.
We start from the ground up.
Site preparation, excavation and earthworks delivered safely, efficiently and with an understanding of the bigger project.
We take care of the details.
Electrical, plumbing, irrigation, concreting, fencing and specialist trades coordinated through one experienced team.
card_style = filled, each card’s Show button on → the title is plain and a button is shown (Services archive pattern).
source = manual cards / picked posts / Services (CPT); card_style = plain / filled / white.
card_style = white on the black band → white panels, 3-up, tight 24px gutter. Per card: title (black caps), subtitle (dark-orange tagline), text, and a centred outline “PROJECTS” pill pinned to the card bottom so it lines up across the row. The pill points at the card’s project_link (a Project post; falls back to link + Show button). Figma 32:330–379. The live Our Services §2 uses source = services — one card per service CPT post (tagline / body / one linked Project), ordered by menu order. The demo below is static.
We take the lead.
From refurbishments and upgrades through to larger commercial builds, our team coordinates trades, timelines, quality and delivery from start to finish.
We take it back.
Safe, efficient and compliant demolition, from careful removal through to complete site clearance ready for whatever comes next.
We start from the ground up.
We prepare sites efficiently and correctly while coordinating with the wider construction program — keeping more of the project under one accountable team.
We keep it moving.
People, trades, suppliers, timelines, budgets, compliance. Our approach brings it all together with a clear point of contact and an experienced team.
We take care.
Where DH Contracting began. Our experienced team safely manages asbestos removal and remediation to create a safe site for the next stage of work.
We make it solid.
From site works and slabs to pathways and other concrete requirements, coordinated as part of our broader project capability.
Two columns, each its own eyebrow (H3) + subhead (H5) + WYSIWYG body + button. show_rules adds the black hairline top & bottom of every column; the button pins to the column bottom so both — and the bottom rules — line up. Buttons take the .bg-* section-pill treatment (5a).
Our work
Built on responsibility.
Different projects with different challenges, but all with the same approach.
From commercial construction and government works to regional and community projects, we bring the same level of ownership to every job we take on.
We take pride.
Not every project changes a community.
But some do.
From delivering upgrades across the APY Lands to supporting sporting clubs and local organisations closer to home, we’re proud to contribute to the communities where we work.
For us, success isn’t measured only by what we build. It’s also measured by what we leave behind.
Same split + show_rules as Home §4 but every col_button is empty. The columns still stretch to equal height, so the bottom hairlines stay aligned without a button to pin.
Our vision.
To build a business known for taking responsibility.
For our work.
For our people.
For our clients.
And for the communities we work in.
As we grow, we want to stay true to what got us here, a personal approach with a commitment to delivering outcomes we can all be proud of.
Our mission
To make every project feel personal.
We take the time to understand what our clients need, bring the right people together and take ownership from start to finish.
We communicate openly, solve problems, do what we say we’ll do and never lose sight of the final outcome.
Our vision
Build it once. Build it right.
Left column. This variation drops show_rules, so no hairlines.
Our mission
Leave the site better than we found it.
Right column with a longer body so the button-pin behaviour is visible — both buttons still align on the column baseline.
Get in touch
A short supporting line that sets up the call to action.
Orange H3 heading (block_title) in the content column; the .marquee ticker breaks out to 100vw. Countach 96 white caps, small orange square separators (separator field). Two identical .marquee__groups make the loop seamless; .is-pausable pauses on hover; prefers-reduced-motion stops the animation.
Content comes from the Testimonials CPT (source: cpt) — the block takes only background + heading. Two-line Countach H3 heading (block_title + block_intro, both white). White cards on the grey (bg-secondary #4F5052) concrete-textured band (Figma 18:177 / 18:292, screen 25%): quote (Pacaembu 18 black), a black hairline, then the attribution — __name (the CPT title) dark-orange + __role (Location field) black, one Countach H6 caps line. Slider arrows sit below the track. No photo/logo on DH.
Real projects. Real relationships.
Tricky access, no drama. Would use again.
Client 1Builder
Tricky access, no drama. Would use again.
Client 2Builder
Tricky access, no drama. Would use again.
Client 3Builder
A quote long enough to clip past ~6 lines is clamped on the card; js/scripts.js un-hides .testimonialCard__more and the full text opens in the shared #testimonialModal (the block prints it once per page). Short quotes never show the button.
From the first site visit they were straight with us about what the job actually needed, what it would cost and how long it would take. When we hit a services clash underground they had a fix drawn up the same afternoon and kept the program on track. Every crew that came through was tidy, safe and easy to deal with, and the final handover was exactly what we were quoted, with no chasing and no surprises on the invoice.
From the first site visit they were straight with us about what the job actually needed, what it would cost and how long it would take. When we hit a services clash underground they had a fix drawn up the same afternoon and kept the program on track. Every crew that came through was tidy, safe and easy to deal with, and the final handover was exactly what we were quoted, with no chasing and no surprises on the invoice.
From the first site visit they were straight with us about what the job actually needed, what it would cost and how long it would take. When we hit a services clash underground they had a fix drawn up the same afternoon and kept the program on track. Every crew that came through was tidy, safe and easy to deal with, and the final handover was exactly what we were quoted, with no chasing and no surprises on the invoice.
Tell us about your project and we'll get back to you.
Real output comes from do_shortcode() — Bootstrap fields shown here so the container and heading styling are visible.
title_size: md heading (orange on the dark band). The markup below uses the real Ninja Forms class names the .formBlock rules target: <nf-field> is the grid item (name / email / phone pair up from md, the rest span full width), inputs are white / square, the submit is an orange outline pill bottom-right. Cloudflare Turnstile needs site keys (Ninja Forms → Settings → Turnstile).
Also supports display_mode = marquee (reuses the .marquee track) and swiper (drag carousel).
Ruled two-column header (block_title H3 + subtitle caps sub-line left, body right) over a centred row of certification badges. Orange band — ink flips to black.
Responsibility means doing things properly.
Safety, quality and compliance aren’t boxes to tick. They’re fundamental to how we work.
DH Contracting maintains the licences, systems and industry accreditations required to deliver work safely, professionally and in accordance with relevant standards.
Because taking responsibility means holding ourselves to a higher standard.
Composed from two rows, no new code: accreditations with no badges (ruled header only), then logo_slider grid mode on the same orange band (spacing_top: none). On .bg-primary the grid items become fixed 190×140 white tiles, object-fit: cover, left-packed — the sponsor-logo treatment.
Backing the communities that back us.
We’re proud to support sporting clubs, community groups and organisations across South Australia. Because strong communities, like strong projects, are built when people work together.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero.
Heading + intro come from the shared block_settings / block_header groups.
Grid thumbnails use the hard-cropped square 800sq-crop size on .galleryBlock__img (aspect-ratio: 1 holds the square even on a small upload); data-full points the lightbox at the 720p size. A centred Bootstrap modal (#galleryModal_*) with round .galleryModal__nav / .galleryModal__close icon controls is emitted by the block after section-close; omitted here. columns (2 / 3 / 4) sets the grid width; slider mode swaps the grid for a Swiper.
columns = 4 → col-6 col-md-3 (2-up below md). block_title empty, so no .blockHeader. Sits under the APY Lands text block with spacing_top: none, continuing the black band.
team CPT (About §4 "MEET THE TEAM")Heading + intro (block_header clone) in a narrow left column; a grid of member cards on the right (3-up → 2-up → 1-up). Each card (inc/teamCard.php) = portrait photo with an orange edge accent, then name + role. One card per team post in the chosen team_group term(s), ordered by menu order.
Behind every DH Contracting project are people who take their work personally. Meet the people responsible for keeping DH Contracting, and your project, moving.
Darren Hunter
Founder / Director
Felicity Hunter
Director
Tracy
Title goes here