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.

Include component-hero snippet

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.jpg',
   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.

GET A ROOM

Include component-hero-text snippet

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

{% include 'component-hero-text'
   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'

ROOM Resource Library

Include component-text-image snippet

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
%}

Translation missing: en.landing.space_planning.placement.block_0.title

Translation missing: en.landing.space_planning.placement.block_0.text
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 %}

Translation missing: en.landing.space_planning.placement.block_0.title

Translation missing: en.landing.space_planning.placement.block_0.text
GET A ROOM

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

Include component-three-up snippet

Three up is a reusable, flexible component.

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

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.

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.

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.

Include component-three-down snippet

Three down is a reusable, flexible component.

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

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'

Include component-text snippet

Leave out the buttonLabel & buttonHref to not include CTA.

text variable needs to include <mark> and </mark> in order to make part of the text black.

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

{% include 'component-text'
   text: 'landing.contact_sales.second_quote_html'
   buttonLabel: 'general.arrange_demo'
   buttonHref: virtualTours[0].url_mob
   actionType: 'button'
   align: 'center'
%}

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

GET A ROOM

Can’t visit a showroom? Schedule a video call with one of our experts.

Include component-text-two-column snippet

{% include 'component-text-two-column'
   textLeft: 'landing.room-service.subheader.description_01',
   textRightFirst: 'landing.room-service.subheader.description_02',
   textRightSecond: 'landing.room-service.subheader.description_03'
%}

When we say we're here for you, we mean it.

Our Room Service protection plan builds upon our standard two-year limited warranty.

Extend the life of your products well into the future.

Include component-image snippet

{% include 'component-image'
   largeUpAsset: 'Office_Wide_Set_Product_2138_1.jpg'
   mediumDownAsset: 'Office_Wide_Set_Product_2138_1.jpg'
%}

Your Cart
Your cart is empty
Shop now
Estimated Total:
Monthly Payment:
Checkout
+ Add more
We just need a bit more information.
By clicking 'Get A Quote' you agree to be contacted by ROOM.
We'll be with you soon!

A ROOM representative will reach out soon via email. Feel free to take a look around while you wait.

Close
Taxes and Shipping calculated at checkout

Our Product Guide,
straight to your inbox

Discover our suite of modular products designed to help businesses return to a better way of working.

Thanks for your interest!

We’ve sent our Product Guide directly to your inbox. You can expect to receive an email from us in the next couple of minutes. Feel free to take a look around while you wait.

Explore ROOM