Components

How to use this page?
Each component is divided by 1px orange border at the top and at the bottom of the component to clearly identify components's size.
There is a code block with full component functionality provided before rendered component.

"hero" Component

Hero is a reusable, flexible component for showcasing hero unit style content. It is extended to the entire viewport on only one side to showcase key marketing messages with style. In some cases creative requires only two breakpoints. By default, three breakpoints are supported, but only two could be set as well, just add componentClass: 'medium-down-large-up-only'.

{% include 'component-hero',
   title: 'landing.space_planning.hero.title',
   paragraph: 'landing.space_planning.hero.subtitle',
   buttonLabel: 'general.cta.label',
   buttonHref: 'general.cta.href',
   largeUpAsset: 'splace-planning-hero.png',
   mediumDownAsset: 'splace-planning-hero-mobile.png'
%}

You are able to pass custom class and id names to both component and button inside of the component via:

   componentId: 'custom-component-id',
   componentClass: 'custom-component-class',
   buttonId: 'custom-button-id',
   buttonClass: 'custom-button-class'

Make room for a better way to work.

Our modular rooms create a happier, more productive workplace. Find out how many booths you need to create the ideal space for your workforce.

"text-hero" Component

Text Hero is a reusable, flexible component for showcasing hero with only text.

{% include 'component-text-hero'
   title: 'landing.space_planning.hero.title'
   backgroundColor: '#739489'
%}

You are able to pass custom class and id names to both component and button inside of the component via:

   componentId: 'custom-component-id',
   componentClass: 'custom-component-class',
   buttonId: 'custom-button-id',
   buttonClass: 'custom-button-class'

Resource Library

"text-image" Component

Used for displaying image on the left and text on the right.

{% include 'component-text-image'
   heading: 'general.cta.label' // required
   paragraph: 'general.cta.label' // required
   imageAsset: 'placement-img-2.png' // required
   linkLabel: 'general.cta.label' // optional
   linkHref: '/' // optional
   align: 'right' // required
%}

Place booths in high-activity areas.

Generally speaking, the more crowded an area, the higher the noise level. Our phone booths are best situated in close proximity to where they're needed most. They can create space for focused work and private calls in heavily trafficked areas, or create space for important conversations in quiet areas.
GET A ROOM

You're able to include this component in a loop, that's useful for displaying left / right content. For example:

{%- capture coponentImageAssetsArray -%}
    placement-img-1.png,
    placement-img-2.png,
    placement-img-3.png
{%- endcapture -%}

{%- capture componentLinkLabelsArray -%}
    general.cta.label,
    general.cta.label,
    general.cta.label
{%- endcapture -%}

{%- assign coponentImageAssetsArray = coponentImageAssetsArray | split: "," -%}
{%- assign componentLinkLabelsArray = componentLinkLabelsArray | split: "," -%}
{%- assign alignment = "right, left, right" | split: "," -%}

{% for i in (0..2) %}
   {%- capture block -%}landing.space_planning.placement.block_{{i}}.{%- endcapture -%}
   {%- capture componentTitles -%}{{block}}title{%- endcapture -%}
   {%- capture componentParagprahs -%}{{block}}text{%- endcapture -%}

   {%- assign coponentImageAssets = coponentImageAssetsArray[i] | strip -%}
   {%- assign componentLinkLabels = componentLinkLabelsArray[i] | strip -%}
   {%- assign alignmentValue = alignment[i] | strip -%}

   {% include 'component-text-image'
      heading: componentTitles
      paragraph: componentParagprahs
      imageAsset: coponentImageAssets
      linkLabel: componentLinkLabels // optional
      linkHref: 'general.cta.href' // optional
      align: alignmentValue
      componentClass: 'string' // optional
   %}
{% endfor %}

Place booths in high-activity areas.

Generally speaking, the more crowded an area, the higher the noise level. Our phone booths are best situated in close proximity to where they're needed most. They can create space for focused work and private calls in heavily trafficked areas, or create space for important conversations in quiet areas.
GET A ROOM

Set the rule: no camping allowed.

Promote proper use by ensuring team members use phone booths for one-hour time blocks or less. Make sure you have enough booths throughout the space so they're available to anyone who needs to pop in for a quick work session.
GET A ROOM

Convert underutilized spaces into productivity hubs.

Our phone booths have a small footprint, which means that multiple booths can easily be placed in a row against a wall, lining a hallway, or within dead space, to ensure you're maximizing your real estate.
GET A ROOM

Three up

Three up is a reusable, flexible component.

{% include 'component-text-image-three-up',
   title1: 'landing.space_planning.hero.title',
   paragraph1: 'landing.space_planning.hero.subtitle',
   image1: 'splace-planning-hero.png',
   title2: 'landing.space_planning.hero.title',
   paragraph2: 'landing.space_planning.hero.subtitle',
   image2: 'splace-planning-hero.png',
   title3: 'landing.space_planning.hero.title',
   paragraph3: 'landing.space_planning.hero.subtitle',
   image3: 'splace-planning-hero.png',
%}

You are able to pass custom class and id names to both component and button inside of the component via:

   componentId: 'custom-component-id',
   componentClass: 'custom-component-class',
   buttonId: 'custom-button-id',
   buttonClass: 'custom-button-class'

translation missing: en.landing.home.header.title

Our modular rooms create a happier, more productive workplace. Find out how many booths you need to create the ideal space for your workforce.

translation missing: en.landing.home.header.title

Our modular rooms create a happier, more productive workplace. Find out how many booths you need to create the ideal space for your workforce.

translation missing: en.landing.home.header.title

Our modular rooms create a happier, more productive workplace. Find out how many booths you need to create the ideal space for your workforce.

Three down

Three down is a reusable, flexible component.

{% include 'component-text-image-three-down',
   title1: 'landing.space_planning.hero.title',
   paragraph1: 'landing.space_planning.hero.subtitle',
   image1: 'splace-planning-hero.png',
   title2: 'landing.space_planning.hero.title',
   paragraph2: 'landing.space_planning.hero.subtitle',
   image2: 'splace-planning-hero.png',
   title3: 'landing.space_planning.hero.title',
   paragraph3: 'landing.space_planning.hero.subtitle',
   image3: 'splace-planning-hero.png',
%}

You are able to pass custom class and id names to both component and button inside of the component via:

   componentId: 'custom-component-id',
   componentClass: 'custom-component-class',
   buttonId: 'custom-button-id',
   buttonClass: 'custom-button-class'

The Perfect Desk Chair from HAY
Our friends at HAY are inspired by the realities of life today, creating unique products that can be used in diverse environments and for diverse needs. We’ve partnered with HAY to bring you the AAC 51 Chair, available in leather or fabric, as the perfect seating complement to our WFH Desk.
The Desktop Task Lamp from Pablo Designs
Place the spotlight on productivity with the perfect desktop lamp from Pablo Designs. We picked the refined Talia Table Lamp, which serves double-duty with embedded wireless charging.
In-Desk Electrical Unit
Our built-in desktop power unit ensures you never skip a beat. Simply pop open the desk tray and drop in the electrical unit. Featuring two outlets, two USB-A ports, and one USB-C port.

Text only - Small

{% include 'component-text',
   text: 'landing.meeting-room.quote.first.p_html',
   buttonLabel: 'general.cta.label',
   buttonHref: 'general.cta.href',
   small: true
%}

Introducing a better way to work, together. Connect, collaborate, and contribute, all without the hassle of additional construction.

GET A ROOM

Text only - Large

{% include 'component-text',
   text: 'landing.meeting-room.quote.first.p_html',
   buttonLabel: 'general.cta.label',
   buttonHref: 'general.cta.href'
%}

Introducing a better way to work, together. Connect, collaborate, and contribute, all without the hassle of additional construction.

GET A ROOM

Text only - Two column

{% include 'component-text-two-column'
   textLeft: 'landing.meeting-room.video-conferencing.paragraph_2',
   textRightFirst: 'landing.meeting-room.video-conferencing.paragraph_2',
   textRightSecond: 'landing.meeting-room.video-conferencing.paragraph_1'
%}

translation missing: en.landing.meeting-room.video-conferencing.paragraph_2

translation missing: en.landing.meeting-room.video-conferencing.paragraph_2
translation missing: en.landing.meeting-room.video-conferencing.paragraph_1

Image Text Logos

{% include 'component-image-text-logos'
   imageAsset: 'video-conferencing-build-in-2.2x.jpg'
   heading: 'landing.open-meeting-room.video-conferencing.title'
   paragraph: 'landing.open-meeting-room.video-conferencing.paragraph_html'
   linkLabel: 'landing.open-meeting-room.video-conferencing.link.label'
   linkHref: 'landing.open-meeting-room.video-conferencing.link.url'
   logosAsset: 'video-conferencing-solutions.2x.jpg'
%}

Connect confidently with built-in video conferencing
The Jabra PanaCast 180-degree camera shows everyone in the room, not just the person in front of the screen.

Compatible with all leading video and audio conferencing solutions, including Microsoft Teams & Zoom, the PanaCast ensures seamless integration, regardless of your choice of equipment.

Your Cart
Your cart is empty
Shop now
Estimated Total:
Monthly Payment:
Taxes and Shipping calculated at checkout
Chat with us