The page-level blocks: heroes, feature rows, cards, bands and the footer. Most of them change layout at a breakpoint, so resize the window while you read — each section notes what should happen and where.
An alternating text/image row. Resize the window to check it:
the columns sit side by side from lg (64rem) up and stack below it,
and the image swaps from .img-brick to .img-brick-mobile
at sm (40rem).
%3C/text%3E%3C/svg%3E)
%3C/text%3E%3C/svg%3E)
.revert — the image leads on wide screens. It still stacks text-first below lg.
.half on both the text and the image splits the row evenly instead of 1/3–2/3.
.no-border on the image drops the frame.
Title decorations from base/index.css. These are the assets that were missing from the package until 3.0.2, so they are worth having on screen.
Stripe blue
Stripe white
Inline
An underlined word
A highlighted word
The homepage hero. .hpblock-right is hidden below xl (80rem), so the imagery only appears on wide screens; the two images float on a CSS animation.
Your workplace,
better
A row of square tiles over the repeating pattern.png background (.possibilities-bg). The tiles do not wrap — the row is flex-row at every breakpoint.
Endless possibilities
A feature row: icon, title and description. .feature-content-icon is hidden below sm. The row highlights on hover.
Spatial audio — hear who is near you
Volume follows proximity, so conversations start and end naturally.
Custom maps — build your own office
Design a space that matches how your team actually works.
Linked cards, basis-1/3 from lg up and full width below. The whole card is the link and scales on hover. Put them in a flex flex-wrap parent.
A row of customer logos, held at 50% opacity until hover. It is a <ul> — .client is the list item.
A quote with an avatar and attribution. Stacks below lg, and the quote is centred there rather than left-aligned.
A simple content card: image, centred content and an actions row. .card-img takes a background image.
Card title
A short supporting line for the card.
A plan card. The title overlaps the top border by design (-mt-8), so leave room above it.
Free
Up to 10 people in a shared map.
Team
Your own map, custom domain, priority support.
Scale
SSO, analytics and a dedicated success manager.
An illustration beside a heading, paragraph and buttons. Stacks below md, where the content also centres.
A dark full-bleed band with two decorative pixels and an illustration. The illustration column is hidden below md. Note that .rgpd-title sets no colour of its own, so the heading needs text-white to be legible against the band.
GDPR compliant
All our services are hosted within the European Union.
Columns separated by a hairline rule (the first column suppresses its own). Links grow an underline on hover; .footer-social lays icons out inline.
