Colors

$primary #447355

$green2 #427052

$green3 #518a70

$green4 #87a28e

$green5 #dce9d5

$green6 #6cb86a

$grey1 #6a768c

$yellow1 #ebc172

$purple1 #ae72a3

$purple2 #A25D96

Buttons

Button 1 Button 2 Button 3 Button 4

Icons

General Notes

Buttons and links

Buttons and links can be instantly styled by adding a class of .button-X (e.g. .button-1) or using @include button-X in the SCSS. They can then be modified as necessary.

Animations

Look below at "Image Left, Copy Right 1 - Section (add new)". The classes "reveal" and "animate" are used to control the animation and can be added to any section to add an animation. (Important: you will still need to add css to these classes for each section.)

WYSIWYG

Every Custom HTML that is CMS editable has an associated Code Snippet. The Code Snippet is purely aesethetic and works as a "reset" if the CMS user were to break the WYSIWYG. Essentially, the code snippet is a an inner container with styles associated with it ONLY in the style layout styling. Without that code snippet, the section should still work in preview/live. The outer shell contains the styling in the main SCSS.

WYSIWYG Example

Look below at "Image Left, Copy Right 1 - Section (add new)". Inspect the code for the copy. The copy is within a div with the class "il-cr-1-cms". This is the code snippet that allows the CMS user to see styling in the wysiwyg, but contains no actual styling itself in the main SCSS. The styling exists in the outer div with the class "copy".

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Lorem | Lorem

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Corporate Functions Learn More

Marketing & Sales Learn More

Operations Learn More

Technology Learn More

Product Learn More

Research & Development Learn More

Software Engineering Learn More

Hardware Engineering Learn More

View All of Our Available Opportunities

You have not viewed any jobs recently.

You have not saved any jobs recently.

So you can
revolutionize
robotics By combining your engineering skills with iRobot’s tech innovation, you can build something new every day.

Innovation Because doing the same old thing is so yesterday.

So you can
thrive We get it – you do better work in a workplace that provides flexibility. And when you work better, we do too.

Work-Life Balance It's a way of life at iRobot.

So you can
crush sales
records If you’ve mastered the art of persuasion, iRobot’s products and platform will make it easy for you to close deals in style.

Performance Because your skills can impact a global stage.