UI-Components

Alerts

Usage

.alert {
        @include alert();
    }

Alert Success

We've successfully created your offer! 
<div class="alert alert--success">
    	<?xml version="1.0" encoding="utf-8"?>
    	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
        <g>
          <defs>
            <rect id="SVGID_1_" width="36" height="36"/>
          </defs>
          <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
          </clipPath>
        </g>
        <g>
          <defs>
            <rect id="SVGID_3_" width="36" height="36"/>
          </defs>
          <clipPath id="SVGID_4_">
            <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
          </clipPath>
        </g>
        <path class="st0" d="M17.5,0C7.8,0,0,7.8,0,17.5S7.8,35,17.5,35S35,27.2,35,17.5S27.4,0,17.5,0 M17.5,32.1
          c-8.1,0-14.6-6.5-14.6-14.6S9.4,2.9,17.5,2.9s14.6,6.5,14.6,14.6S25.8,32.1,17.5,32.1"/>
        <path class="st0" d="M24.4,11.4l-9.5,8.9l-2.5-2.5c-0.5-0.5-1.4-0.5-1.9,0c-0.5,0.5-0.5,1.4,0,1.9l3.5,3.5c0.3,0.3,0.6,0.5,1,0.5
          s0.6-0.2,1-0.3l10.5-9.9c0.6-0.5,0.6-1.4,0-1.9C25.6,10.9,24.8,10.8,24.4,11.4"/>
        </svg>
    	<div class="alert__content">
    		We've successfully created your offer!
    	</div>
    </div>

Alert Warning

Unfortunately our service doesn’t currently support Braga. 
<div class="alert alert--warning">
    	<?xml version="1.0" encoding="utf-8"?>
    	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px" height="22px" viewBox="0 0 22 22">
        <path fillRule="evenodd" d="M 11 22C 4.93 22-0 17.07-0 11-0 4.93 4.93 0 11 0 17.07 0 22 4.93 22 11 22 17.07 17.07 22 11 22ZM 11 1.76C 5.91 1.76 1.76 5.91 1.76 11 1.76 16.09 5.91 20.24 11 20.24 16.09 20.24 20.24 16.09 20.24 11 20.24 5.91 16.09 1.76 11 1.76ZM 11 18.04C 10.27 18.04 9.68 17.45 9.68 16.72 9.68 15.99 10.27 15.4 11 15.4 11.73 15.4 12.32 15.99 12.32 16.72 12.32 17.45 11.73 18.04 11 18.04ZM 11 13.64C 10.51 13.64 10.12 13.25 10.12 12.76 10.12 12.76 10.12 4.4 10.12 4.4 10.12 3.91 10.51 3.52 11 3.52 11.49 3.52 11.88 3.91 11.88 4.4 11.88 4.4 11.88 12.76 11.88 12.76 11.88 13.25 11.49 13.64 11 13.64Z" fill="#1d2022"/></svg>
    
    	<div class="alert__content">
    		Unfortunately our service doesn’t currently support Braga.
    	</div>
    </div>

Animations

Usage

.animation {
        &--fade-in {
            @include fade-in();
        }
    
        &--fade-out {
            @include fade-out();
        }
    
        &--slide-in {
            @include slide-in();
        }
    
        &--scale-in {
            @include scale-in();
        }
    }

Hover on elements to see the animation

Fade In

Hover on the element to see the animation

We've successfully created your offer! 
<div class="animation animation--fade-in">
    	<div class="alert alert--success">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
            <g>
              <defs>
                <rect id="SVGID_1_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <g>
              <defs>
                <rect id="SVGID_3_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_4_">
                <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <path class="st0" d="M17.5,0C7.8,0,0,7.8,0,17.5S7.8,35,17.5,35S35,27.2,35,17.5S27.4,0,17.5,0 M17.5,32.1
              c-8.1,0-14.6-6.5-14.6-14.6S9.4,2.9,17.5,2.9s14.6,6.5,14.6,14.6S25.8,32.1,17.5,32.1"/>
            <path class="st0" d="M24.4,11.4l-9.5,8.9l-2.5-2.5c-0.5-0.5-1.4-0.5-1.9,0c-0.5,0.5-0.5,1.4,0,1.9l3.5,3.5c0.3,0.3,0.6,0.5,1,0.5
              s0.6-0.2,1-0.3l10.5-9.9c0.6-0.5,0.6-1.4,0-1.9C25.6,10.9,24.8,10.8,24.4,11.4"/>
            </svg>
    		<div class="alert__content">
    			We've successfully created your offer!
    		</div>
    	</div>
    </div>

Fade Out

We've successfully created your offer! 
<div class="animation animation--fade-out">
    	<div class="alert alert--success">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
            <g>
              <defs>
                <rect id="SVGID_1_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <g>
              <defs>
                <rect id="SVGID_3_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_4_">
                <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <path class="st0" d="M17.5,0C7.8,0,0,7.8,0,17.5S7.8,35,17.5,35S35,27.2,35,17.5S27.4,0,17.5,0 M17.5,32.1
              c-8.1,0-14.6-6.5-14.6-14.6S9.4,2.9,17.5,2.9s14.6,6.5,14.6,14.6S25.8,32.1,17.5,32.1"/>
            <path class="st0" d="M24.4,11.4l-9.5,8.9l-2.5-2.5c-0.5-0.5-1.4-0.5-1.9,0c-0.5,0.5-0.5,1.4,0,1.9l3.5,3.5c0.3,0.3,0.6,0.5,1,0.5
              s0.6-0.2,1-0.3l10.5-9.9c0.6-0.5,0.6-1.4,0-1.9C25.6,10.9,24.8,10.8,24.4,11.4"/>
            </svg>
    		<div class="alert__content">
    			We've successfully created your offer!
    		</div>
    	</div>
    </div>

Scale In

Hover on the element to see the animation

We've successfully created your offer! 
<div class="animation animation--scale-in">
    	<div class="alert alert--success">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
            <g>
              <defs>
                <rect id="SVGID_1_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <g>
              <defs>
                <rect id="SVGID_3_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_4_">
                <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <path class="st0" d="M17.5,0C7.8,0,0,7.8,0,17.5S7.8,35,17.5,35S35,27.2,35,17.5S27.4,0,17.5,0 M17.5,32.1
              c-8.1,0-14.6-6.5-14.6-14.6S9.4,2.9,17.5,2.9s14.6,6.5,14.6,14.6S25.8,32.1,17.5,32.1"/>
            <path class="st0" d="M24.4,11.4l-9.5,8.9l-2.5-2.5c-0.5-0.5-1.4-0.5-1.9,0c-0.5,0.5-0.5,1.4,0,1.9l3.5,3.5c0.3,0.3,0.6,0.5,1,0.5
              s0.6-0.2,1-0.3l10.5-9.9c0.6-0.5,0.6-1.4,0-1.9C25.6,10.9,24.8,10.8,24.4,11.4"/>
            </svg>
    		<div class="alert__content">
    			We've successfully created your offer!
    		</div>
    	</div>
    </div>

Slide In

Hover on the element to see the animation

We've successfully created your offer! 
<div class="animation animation--slide-in">
    	<div class="alert alert--success">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
            <g>
              <defs>
                <rect id="SVGID_1_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <g>
              <defs>
                <rect id="SVGID_3_" width="36" height="36"/>
              </defs>
              <clipPath id="SVGID_4_">
                <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
              </clipPath>
            </g>
            <path class="st0" d="M17.5,0C7.8,0,0,7.8,0,17.5S7.8,35,17.5,35S35,27.2,35,17.5S27.4,0,17.5,0 M17.5,32.1
              c-8.1,0-14.6-6.5-14.6-14.6S9.4,2.9,17.5,2.9s14.6,6.5,14.6,14.6S25.8,32.1,17.5,32.1"/>
            <path class="st0" d="M24.4,11.4l-9.5,8.9l-2.5-2.5c-0.5-0.5-1.4-0.5-1.9,0c-0.5,0.5-0.5,1.4,0,1.9l3.5,3.5c0.3,0.3,0.6,0.5,1,0.5
              s0.6-0.2,1-0.3l10.5-9.9c0.6-0.5,0.6-1.4,0-1.9C25.6,10.9,24.8,10.8,24.4,11.4"/>
            </svg>
    		<div class="alert__content">
    			We've successfully created your offer!
    		</div>
    	</div>
    </div>

Buttons

Usage

.button {
        @include button();
    }

Button Primary

Register
<div class="button button--primary">Register</div>

Button Secondary

Register
<div class="button button--secondary">Register</div>

Button Alternative

Register
<div class="button button--alternative">Register</div>

Button Disabled

Register
<div class="button button--disabled">Register</div>

Button Uppercase

Register
<div class="button button--uppercase button--secondary">Register</div>

Button Sizes

Register
Register
Register
<div class="buttons-wrapper">
    	<div class="button button--alternative button--large">Register</div>
    	<div class="button button--alternative button--medium">Register</div>
    	<div class="button button--alternative button--small">Register</div>
    </div>

Checkbox

Usage

.checkbox {
        @include checkbox();
    }

Checkbox

<div class="dropdown-wrapper">
    	<div class="dropdown">
    		<div class="dropdown-button">
    			What are you?
    		</div>
    		<div class="dropdown__wrapper">
    			<div class="dropdown__item">Student</div>
    			<div class="dropdown__item">Full-time worker</div>
    			<div class="dropdown__item">Tourist</div>
    		</div>
    	</div>
    </div>
    
    <script async>
    	$('.dropdown-button').on('click', function() {
    		$(this).toggleClass('dropdown-button--active');
    	});
    </script>

Info Box

Usage

.info-box {
        @include info-box();
    }

Info Box

uniQ - Uniplaces Internal CSS Framework/Toolkit
A mostly reasonable approach to the CSS and Sass internal toolkit we use at Uniplaces https://github.com/uniplaces/uniplaces-uniq 
<div class="info-box">
    	<div class="info-box__icon"></div>
    	<div class="info-box__title">uniQ - Uniplaces Internal CSS Framework/Toolkit</div>
    	<div class="info-box__hr"></div>
    	<div class="info-box__content">
    		A mostly reasonable approach to the CSS and Sass internal toolkit we use at Uniplaces https://github.com/uniplaces/uniplaces-uniq
    	</div>
    </div>

Inputs

Usage

.input {
        @include input();
    }
    
    .input-container {
        @include input-container();
    }
    
    .input {
        @include input();
    }
    
    .input-button {
        @include input-button();
    }
    
    .input-right-icon {
        @include input-right-icon();
    }
    
    .mobile-number {
        @include mobile-number();
    }
    
    .input-price {
        @include input-price();
    }

Basic

<input type="text" value="Braga" class="input">

Basic Error

<input type="text" value="Braga" class="input input--error">

Basic Warning

<input type="text" value="Braga" class="input input--warning">

Basic Success

<input type="text" value="Braga" class="input input--success">

Button

-
+
<div class="input-container">
    	<input type="text" class="input input--range" placeholder="2 bedrooms">
    	<div class="input-button input-button--disabled">-</div>
    	<div class="input-button">+</div>
    </div>

Bordered

<input type="text" value="Braga" class="input input--bordered">

Mobile Number

+351
+49
+33
+34
+39
+32
+44 
<div class="input-container">
    	<div class="mobile-number">
    		<div class="mobile-number__country-code">
    			<img src="images/flag.svg" alt=""> +351
    
    			<div class="mobile-number__country-code__dropdown">
    				<div class="mobile-number__country-code__dropdown__item">
    					<img src="https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg" alt=""> +49
    				</div>
    				<div class="mobile-number__country-code__dropdown__item">
    					<img src="https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg" alt=""> +33
    				</div>
    				<div class="mobile-number__country-code__dropdown__item">
    					<img src="https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg" alt=""> +34
    				</div>
    				<div class="mobile-number__country-code__dropdown__item">
    					<img src="https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg" alt=""> +39
    				</div>
    				<div class="mobile-number__country-code__dropdown__item">
    					<img src="https://upload.wikimedia.org/wikipedia/commons/6/65/Flag_of_Belgium.svg" alt=""> +32
    				</div>
    				<div class="mobile-number__country-code__dropdown__item">
    					<img src="https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg" alt=""> +44
    				</div>
    			</div>
    		</div>
    		<input type="text" placeholder="Mobile number">
    	</div>
    </div>
    
    <script async>
    	$('.mobile-number__country-code').on('click', function() {
    		$(this).toggleClass('mobile-number__country-code--active');
    	});
    </script>

Price

€ / month
<div class="input-price">
    	<input type="text" maxlength="4" placeholder="00" value="">
    	<div class="input-price__value"><span class="input-price__currency">€</span> / <span class="input-price__interval">month</span></div>
    </div>

Right Icon Error

<div class="input-container">
    	<input type="text" value="Braga" class="input">
    	<div class="input-right-icon input-right-icon--error">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9.4px" height="9.6px" viewBox="0 0 9.4 9.6" style="enable-background:new 0 0 9.4 9.6;" xml:space="preserve" fill="#FFFFFF">
              <path class="st0" d="M6.2,4.8l2.5-2.4c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L4.8,3.3L2.4,0.8C2,0.4,1.4,0.4,1,0.8c-0.4,0.4-0.4,1,0,1.4l2.4,2.5L0.9,7.2c-0.4,0.4-0.4,1,0,1.4C1,8.8,1.3,8.9,1.6,8.9c0.3,0,0.5-0.1,0.7-0.3l2.5-2.4l2.4,2.5C7.4,8.9,7.7,9,8,9c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L6.2,4.8z"/>
              </svg>
    	</div>
    </div>

Right Icon Success

<div class="input-container">
    	<input type="text" value="Braga" class="input">
    	<div class="input-right-icon input-right-icon--success">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.2px" height="9.2px" viewBox="0 0 11.2 9.2" style="enable-background:new 0 0 11.2 9.2;" xml:space="preserve" fill="#FFFFFF">
              <g><path class="st0" d="M3.5,8.7C3.2,8.7,3,8.6,2.8,8.4L0.7,6.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4l5.6-5.2c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L4.2,8.4C3.9,8.6,3.7,8.7,3.5,8.7z"/></g>
              </svg>
    	</div>
    </div>

Right Icon Warning

<div class="input-container">
    	<input type="text" value="Braga" class="input">
    	<div class="input-right-icon input-right-icon--warning">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px" height="22px" viewBox="0 0 22 22">
            <path fillRule="evenodd" d="M 11 22C 4.93 22-0 17.07-0 11-0 4.93 4.93 0 11 0 17.07 0 22 4.93 22 11 22 17.07 17.07 22 11 22ZM 11 1.76C 5.91 1.76 1.76 5.91 1.76 11 1.76 16.09 5.91 20.24 11 20.24 16.09 20.24 20.24 16.09 20.24 11 20.24 5.91 16.09 1.76 11 1.76ZM 11 18.04C 10.27 18.04 9.68 17.45 9.68 16.72 9.68 15.99 10.27 15.4 11 15.4 11.73 15.4 12.32 15.99 12.32 16.72 12.32 17.45 11.73 18.04 11 18.04ZM 11 13.64C 10.51 13.64 10.12 13.25 10.12 12.76 10.12 12.76 10.12 4.4 10.12 4.4 10.12 3.91 10.51 3.52 11 3.52 11.49 3.52 11.88 3.91 11.88 4.4 11.88 4.4 11.88 12.76 11.88 12.76 11.88 13.25 11.49 13.64 11 13.64Z"/></svg>
    	</div>
    </div>

Right Icon

<div class="input-container">
    	<input type="text" value="Braga" class="input">
    	<div class="input-right-icon">
    		<?xml version="1.0" encoding="utf-8"?>
    		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.2px" height="9.2px" viewBox="0 0 11.2 9.2" style="enable-background:new 0 0 11.2 9.2;" xml:space="preserve" fill="#FFFFFF">
              <g><path class="st0" d="M3.5,8.7C3.2,8.7,3,8.6,2.8,8.4L0.7,6.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4l5.6-5.2c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L4.2,8.4C3.9,8.6,3.7,8.7,3.5,8.7z"/></g>
              </svg>
    	</div>
    </div>

Messages

Usage

.message {
        @include message();
    }

Success

uniQ - Uniplaces Internal CSS Framework/Toolkit 
<div class="message">
    	<div class="message__content message__content--success">
    		uniQ - Uniplaces Internal CSS Framework/Toolkit
    	</div>
    </div>

Error

uniQ - Uniplaces Internal CSS Framework/Toolkit 
<div class="message">
    	<div class="message__content message__content--error">
    		uniQ - Uniplaces Internal CSS Framework/Toolkit
    	</div>
    </div>

Warning

uniQ - Uniplaces Internal CSS Framework/Toolkit 
<div class="message">
    	<div class="message__content message__content--warning">
    		uniQ - Uniplaces Internal CSS Framework/Toolkit
    	</div>
    </div>

Pills

Usage

.pill {
        @include pill();
    }

Pill Error

error label
<div class="pill pill--error">error label</div>

Pill Info

info label
<div class="pill pill--info">info label</div>

Pill Success

success label
<div class="pill pill--success">success label</div>

Pill Warning

warning label
<div class="pill pill--warning">warning label</div>

Progress Bar

Usage

.progress-bar {
        @include progress-bar();
    }

Progress Bar

<div class="progress-bar">
    	<div style="width: 50px;" class="progress-bar__bar"></div>
    </div>

Radio Button

Usage

.radio-button {
        @include radio-button();
    }

Radio Button

<div class="input-container input-container--bordered">
    	<div class="radio-button">
    		<input type="radio" id="piped">
    		<label for="piped">Yes, piped gas</label>
    	</div>
    </div>

Step Card

Usage

.step-card {
        @include step-card();
    }

Step Card

uniQ
Best CSS framework ever
by Uniplaces
Try it!
<div class="step-card">
    	<div class="step-card__title">uniQ</div>
    	<div class="step-card__step">Best CSS framework ever</div>
    	<div class="step-card__hint">by Uniplaces</div>
    	<div class="step-card__progress-bar">
    		<div class="step-card__progress-bar__bar"></div>
    	</div>
    	<div class="step-card__anchor">Try it!</div>
    </div>

Step Card Passed

uniQ
Best CSS framework ever
by Uniplaces
Try it!
<div class="step-card step-card--passed">
    	<div class="step-card__title">uniQ</div>
    	<div class="step-card__step">Best CSS framework ever</div>
    	<div class="step-card__hint">by Uniplaces</div>
    	<div class="step-card__progress-bar">
    		<div class="step-card__progress-bar__bar"></div>
    	</div>
    	<div class="step-card__anchor">Try it!</div>
    </div>

Textarea

Usage

.textarea {
        @include textarea();
    }

Textarea

300 characters
<textarea name="" id="" rows="5" class="textarea" placeholder="I.E: Two bedroom apartment with a balcony and great view in trendy Bairro Alto."></textarea>
    <div class="textarea-counter">300 characters</div>

Toggle

Usage

.toggle {
        @include toggle();
    }

Toggle

<div class="input-container">
    	<div class="toggle" aria-role="button">
    		<label class="toggle__label" for="full-time"></label>
    		<input type="checkbox" class="toggle__input" id="full-time">
    		<div class="toggle__icon">
    			<?xml version="1.0" encoding="utf-8"?>
    			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.2px" height="9.2px" viewBox="0 0 11.2 9.2" style="enable-background:new 0 0 11.2 9.2;" xml:space="preserve" fill="#FFFFFF">
          <g><path class="st0" d="M3.5,8.7C3.2,8.7,3,8.6,2.8,8.4L0.7,6.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4l5.6-5.2c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L4.2,8.4C3.9,8.6,3.7,8.7,3.5,8.7z"/></g>
          </svg>
    			<div class="toggle__button"></div>
    			<?xml version="1.0" encoding="utf-8"?>
    			<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9.4px" height="9.6px" viewBox="0 0 9.4 9.6" style="enable-background:new 0 0 9.4 9.6;" xml:space="preserve" fill="#FFFFFF">
          <path class="st0" d="M6.2,4.8l2.5-2.4c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L4.8,3.3L2.4,0.8C2,0.4,1.4,0.4,1,0.8c-0.4,0.4-0.4,1,0,1.4l2.4,2.5L0.9,7.2c-0.4,0.4-0.4,1,0,1.4C1,8.8,1.3,8.9,1.6,8.9c0.3,0,0.5-0.1,0.7-0.3l2.5-2.4l2.4,2.5C7.4,8.9,7.7,9,8,9c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L6.2,4.8z"/>
          </svg>
    		</div>
    	</div>
    	<label>Full-time workers</label>
    </div>