stat-components

number_stats   

• Ability to add up to 4 stats and stats position should be centred. Also each stat contains an icon

• Ability to upload new icon (JPEG or PNG with a white background) or select an icon from the asset library

• Stats required to be numeric

• Ability to add a unit of measurement after the integer if needed.

• Ability to add descriptor (optional)

• Ability to add tooltip text (optional) (this shows when the icon is hovered over) • A class of 'img-pulse' is added to any icon that has a tooltip to draw attention to it with a pulsing animation around the icon.


Code example of 4 stats in a row with tooltips showing when you hover the icons

lighter
50 %

lighter

Otis Duolifts
18 %

More efficient

lbs capacity
67

lbs capacity

lbs capacity
67

lbs capacity


Code example of 3 stats in a row

Otis Duolifts
56

Otis SkyRise elevators

Otis Duolifts
11

Otis NCE energy-efficient escaltor systems

Otis Duolifts
5

Otis hydraulic elevators


Code example of 2 stats in a row

Otis Duolifts
56

Otis SkyRise elevators

Otis Duolifts
11

Otis NCE energy-efficient escaltor systems


Code example of 1 stat in a row

Otis Duolifts
56

Otis SkyRise elevators

Copy
Edit
<hr> <pre>Code example of 4 stats in a row with tooltips showing when you hover the icons</pre> <hr> <div class="container"> <div class="row number_stats otis-green"> <div class="col-xs-12 col-sm-3 "> <a data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quis adipisci qui modi debitis in corrupti repudiandae tempore doloribus, voluptatibus velit natus, rerum quia temporibus ab. Illo provident tempora ab!"> <div class="img-wrap img-pulse"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="lighter" class="img-responsive centre-block"> </div> </a> <div class="stat_data"> <span id="num-anim-0" class="num-anim" data-end-value="50" data-anim-init="true">50</span> <span class="unit-suffix"> % </span> </div> <p> lighter </p> </div> <div class="col-xs-12 col-sm-3 "> <a data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quis adipisci qui modi debitis in corrupti repudiandae tempore doloribus, voluptatibus velit natus, rerum quia temporibus ab. Illo provident tempora ab!"> <div class="img-wrap img-pulse"> <img src="images/about-us/case-studies/hudson-yards/30-hudson-yards_skyrise.png" alt="Otis Duolifts" onerror="this.src='null;'" class="img-responsive centre-block"> </div> </a> <div class="stat_data"> <span id="num-anim-1" class="num-anim" data-end-value="500" data-anim-init="true">18</span> <span class="unit-suffix"> % </span> </div> <p> More efficient </p> </div> <div class="col-xs-12 col-sm-3 "> <a data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quis adipisci qui modi debitis in corrupti repudiandae tempore doloribus, voluptatibus velit natus, rerum quia temporibus ab. Illo provident tempora ab!"> <div class="img-wrap img-pulse"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="lbs capacity" class="img-responsive centre-block"> </div> </a> <div class="stat_data"> <span id="num-anim-2" class="num-anim" data-end-value="5000" data-anim-init="true">67</span> </div> <p> lbs capacity </p> </div> <div class="col-xs-12 col-sm-3 "> <a data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quis adipisci qui modi debitis in corrupti repudiandae tempore doloribus, voluptatibus velit natus, rerum quia temporibus ab. Illo provident tempora ab!"> <div class="img-wrap img-pulse"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="lbs capacity" class="img-responsive centre-block"> </div> </a> <div class="stat_data"> <span id="num-anim-2" class="num-anim" data-end-value="5000" data-anim-init="true">67</span> </div> <p> lbs capacity </p> </div> </div> </div> <hr> <pre>Code example of 3 stats in a row</pre> <hr> <div class="container"> <div class="row number_stats wow animated animated" style="visibility: visible;"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="img-wrap"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="Otis Duolifts" onerror="this.src='null;'" class="img-responsive centre-block"> </div> <div class="stat_data"> <span class="num-anim" data-end-value="56" data-duration-value="0.4" id="num-anim-0" data-anim-init="true">56</span> </div> <p>Otis SkyRise elevators</p> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="img-wrap"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="Otis Duolifts" onerror="this.src='null;'" class="img-responsive centre-block"> </div> <div class="stat_data"> <span class="num-anim" data-end-value="11" data-duration-value="0.4" id="num-anim-1" data-anim-init="true">11</span> </div> <p>Otis NCE energy-efficient escaltor systems</p> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="img-wrap"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="Otis Duolifts" onerror="this.src='null;'" class="img-responsive centre-block"> </div> <div class="stat_data"> <span class="num-anim" data-end-value="5" data-duration-value="0.4" id="num-anim-2" data-anim-init="true">5</span> </div> <p>Otis hydraulic elevators</p> </div> </div> </div> <hr> <pre>Code example of 2 stats in a row</pre> <hr> <div class="container"> <div class="row number_stats wow animated animated" style="visibility: visible;"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="img-wrap"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="Otis Duolifts" onerror="this.src='null;'" class="img-responsive centre-block"> </div> <div class="stat_data"> <span class="num-anim" data-end-value="56" data-duration-value="0.4" id="num-anim-0" data-anim-init="true">56</span> </div> <p>Otis SkyRise elevators</p> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="img-wrap"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="Otis Duolifts" onerror="this.src='null;'" class="img-responsive centre-block"> </div> <div class="stat_data"> <span class="num-anim" data-end-value="11" data-duration-value="0.4" id="num-anim-1" data-anim-init="true">11</span> </div> <p>Otis NCE energy-efficient escaltor systems</p> </div> </div> </div> <hr> <pre>Code example of 1 stat in a row</pre> <hr> <div class="container"> <div class="row number_stats wow animated animated" style="visibility: visible;"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="img-wrap"> <img src="images/products/gmp/case-studies/eiffel-tower/icon-up-down.png" alt="Otis Duolifts" onerror="this.src='null;'" class="img-responsive centre-block"> </div> <div class="stat_data"> <span class="num-anim" data-end-value="56" data-duration-value="0.4" id="num-anim-0" data-anim-init="true">56</span> </div> <p>Otis SkyRise elevators</p> </div> </div> </div>
Copy
Copy
Edit

vertical_bar_graph   

The Vertical Bar Graph component

Copy
Edit
<!-- components/components/vertical_bar_graph.php -->
Copy
Copy
Edit

( ! ) Warning: file_get_contents(../scss/stat-components/_vertical_bar_graph.scss): failed to open stream: No such file or directory in /home/forge/otis-styleguide.dev.jbspace.com/public/styleguide/atomic-core/index.php on line 360
Call Stack
#TimeMemoryFunctionLocation
10.0000232104{main}( ).../index.php:0
20.0032282792file_get_contents ( ).../index.php:360

product_stats   

• Ability to add main heading (optional)

• Ability to add sub heading (optional)

• Ability to add body copy (optional)

• Ability to add a list of items below the body copy with an optional title.

• Up to 2 bar graphs, each containing 2 or 3 values which represent in percentage

• Ability to enter one ‘Y’ axis value and enter up to 3 statistics with label and a graph title

• Key shows bullet point matching color of the bar and the label

• Ability to add optional key and label to sit underneath the bar graph

In the code examples below – the highest value should be the last bar

Please populate the data-height-value and the content of the div (.graph-bar) with the dynamic value from the CMS.

The data-end-value attribute determines the animation end point. The unit suffix span holds the required unit of measurement to suffix the value with.

This value can also be wrapped in sup tags if the unit of measurement requires it i.e for volume or meters sq etc.

NOTE: There must be at least one item on the left of the component - either a title, subtitle, body copy or list. None are mandatory with the others, but at least one must be present to preserve the look of the component.

Example of two graphs with three statistics each

Don’t think about ride comfort, just enjoy it

A true test of the refined, comfortable ride quality in GeN2® is whether you notice it. Most of the time you probably won't.

To create the oasis of calm you encounter in GeN2®, we replaced the traditional steel belts with coated flat steel belts, eliminating metal-on-metal contact at a stroke. The low-noise gearless machine is mounted on isolating rubber pads too, minimising vibration in the wider building, not just the elevator. Refinement reigns...

20
25
50

Vertical Vibration

  • Gen2® machine-roomless
  • Industry geared system
  • Industry hydraulic system

400 m2 less vibration

12
28
45

Horizontal Vibration

  • Gen2® machine-roomless
  • Industry geared system
  • Industry hydraulic system

74 % less vibration

Example of one graph with two statistics

Don't think about ride comfort, just enjoy it

A true test of the refined, comfortable ride quality in GeN2® is whether you notice it. Most of the time you probably won't.

To create the oasis of calm you encounter in GeN2®, we replaced the traditional steel belts with coated flat steel belts, eliminating metal-on-metal contact at a stroke. The low-noise gearless machine is mounted on isolating rubber pads too, minimising vibration in the wider building, not just the elevator. Refinement reigns...

Office Building

  • Rise: 15 floors/42 meters
  • Floor height: 3 meters
  • Population: 1400 people
  • Occupancy: 100 per floor
  • Configuration: 6 elevator group
  • Specs: 1600 kilograms/4 meters per second
20
85

Vertical Vibration

  • Gen2® machine-roomless
  • Industry geared system
Copy
Edit
<pre>Example of two graphs with three statistics each</pre> <div class="product_stats otis-green"> <div class="container"> <div class="row ride_info"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <h2> Don’t think about ride comfort, just enjoy it </h2> <h3> A true test of the refined, comfortable ride quality in GeN2® is whether you notice it. Most of the time you probably won't. </h3> <p> To create the oasis of calm you encounter in GeN2®, we replaced the traditional steel belts with coated flat steel belts, eliminating metal-on-metal contact at a stroke. The low-noise gearless machine is mounted on isolating rubber pads too, minimising vibration in the wider building, not just the elevator. Refinement reigns... </p> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="otis_vertical_bar_graph" data-anim-init="true"> <div class="graph-bar graph-bar-light-green graph-bar-anim" data-height-value="20" style="height: 40%;"> 20 </div> <div class="graph-bar graph-bar-dark-grey graph-bar-anim" data-height-value="25" style="height: 50%;"> 25 </div> <div class="graph-bar graph-bar-light-grey graph-bar-anim" data-height-value="50" style="height: 100%;"> 50 </div> </div> <h4 class="graph-title"> Vertical Vibration </h4> <ul class="graph-key"> <li> <span> Gen2&reg; machine-roomless </span> </li> <li> <span> Industry geared system </span> </li> <li> <span> Industry hydraulic system </span> </li> </ul> <p class="measurement"> <span class="measurement-wrap"> <span class="num-anim" data-end-value="400" id="num-anim-3" data-anim-init="true">400</span> <span class="unit-suffix"> <sup> m2 </sup> </span> </span> less vibration </p> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <div class="otis_vertical_bar_graph" data-anim-init="true"> <div class="graph-bar graph-bar-light-green graph-bar-anim" data-height-value="12" style="height: 26.6667%;"> 12 </div> <div class="graph-bar graph-bar-dark-grey graph-bar-anim" data-height-value="28" style="height: 62.2222%;"> 28 </div> <div class="graph-bar graph-bar-light-grey graph-bar-anim" data-height-value="45" style="height: 100%;"> 45 </div> </div> <h4 class="graph-title"> Horizontal Vibration </h4> <ul class="graph-key"> <li> <span> Gen2® machine-roomless </span> </li> <li> <span> Industry geared system </span> </li> <li> <span> Industry hydraulic system </span> </li> </ul> <p class="measurement"> <span class="measurement-wrap"> <span class="num-anim" data-end-value="74" id="num-anim-4" data-anim-init="true">74</span> <span class="unit-suffix"> % </span> </span> less vibration </p> </div> </div> </div> </div> <pre>Example of one graph with two statistics</pre> <div class="product_stats otis-green"> <div class="container"> <div class="row ride_info"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <h2> Don't think about ride comfort, just enjoy it </h2> <h3> A true test of the refined, comfortable ride quality in GeN2® is whether you notice it. Most of the time you probably won't. </h3> <p> To create the oasis of calm you encounter in GeN2&reg;, we replaced the traditional steel belts with coated flat steel belts, eliminating metal-on-metal contact at a stroke. The low-noise gearless machine is mounted on isolating rubber pads too, minimising vibration in the wider building, not just the elevator. Refinement reigns... </p> <div class="row"> <div class="col-xs-12 col-md-12"> <div class="tab-list"> <h3> Office Building </h3> <ul> <li>Rise: 15 floors/42 meters</li> <li>Floor height: 3 meters</li> <li>Population: 1400 people</li> <li>Occupancy: 100 per floor</li> <li>Configuration: 6 elevator group</li> <li>Specs: 1600 kilograms/4 meters per second</li> </ul> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="otis_vertical_bar_graph" data-anim-init="true"> <div class="graph-bar graph-bar-light-green graph-bar-anim" data-height-value="20" style="height: 40%;"> 20 </div> <div class="graph-bar graph-bar-dark-grey graph-bar-anim" data-height-value="85" style="height: 85%;"> 85 </div> </div> <h4 class="graph-title"> Vertical Vibration </h4> <ul class="graph-key"> <li> <span> Gen2&reg; machine-roomless </span> </li> <li> <span> Industry geared system </span> </li> </ul> </div> </div> </div> </div>
Copy
Copy
Edit

dials   

The Dials component

Copy
Edit
<!-- components/components/dials.php -->
Copy
Copy
Edit

( ! ) Warning: file_get_contents(../scss/stat-components/_dials.scss): failed to open stream: No such file or directory in /home/forge/otis-styleguide.dev.jbspace.com/public/styleguide/atomic-core/index.php on line 360
Call Stack
#TimeMemoryFunctionLocation
10.0000232104{main}( ).../index.php:0
20.0036283928file_get_contents ( ).../index.php:360

building_stats   

•Ability to choose horizontal or vertical orientation

• Ability to add animated stat circles (left side of line drawing)

• Ability to add a line drawing of the building

• Ability to add static stats (right side of line drawing)

Building stats with a vertical line drawing
90

floors

73

elevators

30 Hudson Yards

Construction ends

2019

Height

1,296 feet

Floor space at 30 Hudson Yards

2.6 million square feet.

Tenants

Time Warner, CNN, Wells Fargo Securities, HBO, DNB

Total Floor space at Hudson Yards development

17 million square feet

Building stats with a horizontal line drawing
122

Escalators

58

XOP Travolators

31

meter max rise

Petronas Towers

Work awarded in

2013

Project completion in

January 2019

Gen2 Elevators

112 meters

Custom Elevators

49

Copy
Edit
<pre>Building stats with a vertical line drawing</pre> <div class="container building_stats"> <div class="row clearfix"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="stat-circle"> <span class="num-anim " data-end-value="90" id="num-anim-4" data-anim-init="true">90</span> <p>floors</p> </div> <div class="stat-circle"> <span class="num-anim " data-end-value="73" id="num-anim-5" data-anim-init="true">73</span> <p>elevators</p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <img class="img-responsive" src="images/about-us/case-studies/hudson-yards/hudson-yards-wireframe.png" alt="30 Hudson Yards"> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="stat-text"> <h2>Construction ends</h2> <p>2019</p> </div> <div class="stat-text"> <h2>Height</h2> <p>1,296 feet</p> </div> <div class="stat-text"> <h2>Floor space at 30 Hudson Yards</h2> <p>2.6 million square feet.</p> </div> <div class="stat-text"> <h2>Tenants</h2> <p>Time Warner, CNN, Wells Fargo Securities, HBO, DNB </p> </div> <div class="stat-text"> <h2>Total Floor space at Hudson Yards development</h2> <p>17 million square feet</p> </div> </div> </div> </div> <pre>Building stats with a horizontal line drawing</pre> <div class="container building_stats building_stats-landscape"> <div class="row"> <div class="col-xs-12 col-lg-4"> <div class="stat-circle"> <span class="num-anim " data-end-value="122" id="num-anim-4" data-anim-init="true">122</span> <p>Escalators</p> </div> </div> <div class="col-xs-12 col-lg-4"> <div class="stat-circle"> <span class="num-anim " data-end-value="58" id="num-anim-5" data-anim-init="true">58</span> <p>XOP Travolators</p> </div> </div> <div class="col-xs-12 col-lg-4"> <div class="stat-circle"> <span class="num-anim " data-end-value="31" id="num-anim-6" data-anim-init="true">31</span> <p>meter max rise</p> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <img class="img-responsive building_line_drawing" src="images/products/gmp/profiles/abu-dhabi-airport/abu-dhabi-airport-line-drawing.jpg" alt="Petronas Towers"> </div> </div> <div class="row"> <div class="col-xs-12 col-md-3"> <div class="stat-text"> <h2>Work awarded in</h2> <p>2013</p> </div> </div> <div class="col-xs-12 col-md-3"> <div class="stat-text"> <h2>Project completion in</h2> <p>January 2019</p> </div> </div> <div class="col-xs-12 col-md-3"> <div class="stat-text"> <h2>Gen2 Elevators</h2> <p>112 meters</p> </div> </div> <div class="col-xs-12 col-md-3"> <div class="stat-text"> <h2>Custom Elevators</h2> <p>49</p> </div> </div> </div> </div>
Copy
Copy
Edit