Side by side
Two equal columns inside a band, copy beside a picture, that stack into one column on phones.
Copy beside a picture
Put the copy first and the picture second. From lg the two children share the row
equally and sit on a common centre line; below it they stack, copy on top. This is the first band
of the Legal home, the About page and the Tech home. The columns break on the window width, not the
width of this box, so the headlines here use size="Title" rather than the hero's
Display.
Legal experts to keep your move on track
Online conveyancing with regular updates and friendly support whenever you need it. No chasing, no jargon, no surprises.
Reversed
reverse moves the second child to the left from lg up, while phones keep
the source order. Write the copy first so a phone still reads it before the picture, and reverse the
row when a page alternates its bands left and right.
No chasing, just selling
Know what's blocking your sales. Stay up to date in real time, with fully transparent conveyancing.
Top aligned
By default the shorter column is centred against the taller one. top lines their tops
up instead, for a long column where a centred partner would float in the middle of nowhere. The
values band on the Tech careers page sets its heading beside a five-item checklist this way.
Our values
Not just words on a wall
At most companies, values are words on a wall. At Koala, they guide how we make decisions, communicate, and solve problems.
- Challenge convention Question "that's how it's always been done." Rethink processes from first principles, don't just tweak what exists.
- Obsess about customers The emotional weight of moving home is massive. See the process through the customer's eyes.
- Don't make me think Stress comes from confusion and uncertainty. Write in plain language, never jargon.
- Act like an owner Proactively solve problems. Take full responsibility, even across team boundaries.
- Sweat the small stuff In conveyancing, small details cause major delays. Double-check everything.
Stretched
stretch makes both columns as tall as the taller one, so a column that is itself a
flex column can pin its last item to the foot with mt-auto. Here the button sits level
with the bottom of the mock-up. Below lg the columns stack and the button follows the
copy.
API
boolean; puts the second child on the left from lgboolean; aligns the column tops instead of their centresboolean; stretches both columns to the taller one's heightmerged onto the row