Styleguide

How to Use this Styleguide

In order to use this styleguide you should load the following partial files into your .scss main styles file and require these JavaScript files.


@import "styleguide/reset";
@import "styleguide/breakpoints";
@import "styleguide/colors";
@import "styleguide/aria";
@import "styleguide/hide-show";
@import "styleguide/footer";
@import "styleguide/tabs";
@import 'styleguide/swiper';
@import "styleguide/general";
@import "styleguide/testimonials";
                                

require smooth-scroll.js
require tabs.js
require swiper.js
require swiper-config.js
require footer-app.js
                                

Design

Typography

Roboto is the regular font-family, which can be used alongside the Mono variation.

Headline 1

Headline subtitle

Headline 2

Body & CTA

Body link

<h1 class="hero-title">Headline 1</h1>

<p class="hero-text">Headline subtitle</p>

<h2 class="standard-item_title">Headline 2</h2>

<p class="standard-item_text">Body & CTA</p>

<a href="#" class="standard-item_link">Body Link</a>

<blockquote class="standard-item_link standard-item_quote">Quote</blockquote>
                                

.hero{
	&-title{
		font-size: 40px;
		line-height: 1.1;
		@media (min-width: $screen-xs-max){
			font-size: 56px;
			line-height: 1.15;
			font-weight: 300;
		}
		@media (min-width: $screen-md-min){
			font-size: 64px;
		}
		@media (min-width: $screen-lg-max){
			font-size: 72px;
		}
		@media (min-width: $screen-xl-max){
			font-size: 88px;
			line-height: 1.1;
		}
	}
	&-text{
		font-size: 18px;
		line-height: 1.35;
		margin-bottom: 16px;
		color: $black7;
		@media (min-width: $screen-xs-max){
			font-size: 24px;
			line-height: 1.4;
			margin-bottom: 32px;
			font-weight: 300;
		}
		@media (min-width: $screen-lg-max){
			font-size: 32px;
			line-height: 1.3;
			margin-bottom: 56px;
		}
	}
}

.standard-item {
	&_title {
		font-size: 32px;
		line-height: 1.15;
		margin-bottom: 16px;
		@media (min-width: $screen-xs-max){
			font-size: 40px;
			line-height: 1.1;
		}
		@media (min-width: $screen-md-min){
			font-size: 48px;
			line-height: 1.15;
			font-weight: 300;
		}
		@media (min-width: $screen-lg-max){
			font-size: 52px;
			line-height: 1.05;
			margin-bottom: 18px;
		}
	}
	&_text{
		font-size: 18px;
		line-height: 1.35;
		color: rgba($black, 0.7);
		@media (min-width: $screen-md-min){
			font-size: 20px;
			line-height: 1.4;
		}
		@media (min-width: $screen-lg-max){
			font-size: 22px;
			line-height: 1.2;
		}
	}
	&_link{
		color: $green;
		text-decoration: underline;
		font-size: 18px;
		line-height: 1.35;
		@media (min-width: $screen-md-min){
			font-size: 20px;
			line-height: 1.4;
		}
		@media (min-width: $screen-lg-max){
			font-size: 22px;
			line-height: 1.2;
		}
		&:hover{
			text-decoration: none;
			color: $green;
		}
	}
}
                                

Colors

This color palette establishes a consistent styling through all landings.

Primary colors

Firebrick Red #FF3B30 - $red rgba(255, 59, 48, 1)
Nero Pasifika Black #252525 - $black rgba(37, 37, 37, 1)
Puerto Rico Turquoise #00C2B2 - $green rgba(0, 194, 178, 1)

Secondary colors

Anti Concrete #F0F0F0 - $bg rgba(240, 240, 240, 1)
Chicane Dust #252525 - $black7 rgba(37, 37, 37, 0.7)
Fingerprint Mint #B7EEE9 - $light-green rgba(183, 237, 233, 1)

Components

Buttons

Buttons communicate the action that will occur when the user touches them.

Sign In Register
Action Link Green Arrow, read more

<a class="standard-cta standard-cta_inverted" href="#">Sign In</a>
<a class="standard-cta" href="#">Register</a>
<a class="standard-cta standard-cta_link" href="#">
    Action Link
    <svg width="24px" height="16px" viewBox="0 -5 33 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Green Arrow, read more</title>
        <path d="M15.663158 16l-1.36421-1.301205 6.24-5.831325L0 8.915663V7.084337l20.538947.048193-6.24-5.831325L15.663157 0 24 7.951807v.096386" fill="#00C2B2" fill-rule="evenodd"/>
    </svg>
</a>
<button class="standard-cta standard-cta_button">Register for Free</button>
                                

.standard-cta{
	color: $white;
	background-color: $red;
	padding: 10px 16px;
	border-radius: 2px;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 11px;
	@media (min-width: $screen-xs-max){
		font-size: 14px;
	}

	will-change: background-color;
	transition: background-color 0.3s;

	&:hover{
		box-shadow: inset 0 0 0 2px $red;
		background-color: transparent;
		color: $red;
	}

	&_inverted{
		background-color: transparent;
		color: $black;
		box-shadow: inset 0 0 0 2px $black2;

		will-change: box-shadow;
		transition: box-shadow 0.3s, color 0.3s;
		
		&:hover{
			box-shadow: inset 0 0 0 2px $red;
		}
	}
	
	&_link{
		width: 100%;
		max-width: 256px;
		display: block;
		padding-top: 12px;
		padding-bottom: 12px;
		text-align: center;
		color: $green;
		background-color: $white;
		text-transform: capitalize;
		font-size: 16px;
		@media (min-width: $screen-lg-max){
			max-width: 256px;
			display: inline;
			font-size: 18px;
			padding-top: 16px;
			padding-bottom: 16px;
		}
		svg{
			will-change: transform;
			transition: transform 0.3s;
		}
		&:hover{
			background-color: $green;
			box-shadow: inset 0 0 0 2px $green;
			color: $white;
			svg{
				transform: translateX(10px);
			}
			svg path{
				fill: $white;
			}
		}
	}
	
	&_button, &_hero{
		width: 85%;
		padding-top: 16px;
		padding-bottom: 16px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		font-size: 16px;
		text-transform: none;
		font-weight: 300;
		text-align: center;
		cursor: pointer;
		@media (min-width: $screen-xs-max){
			width: 100%;
			max-width: 256px;
			margin-left: 0;
		}
		@media (min-width: $screen-lg-max){
			max-width: 342px;
			font-size: 18px;
			&_hero{
				max-width: 180px;
			}
		}
	}
}
                                

Data Tables

Use tables to represent tabulated data.

Open in new tab

<div class="js-tab-widget">
    <ul class="tab-list">
        <li class="tab-item">
            <a class="tab-link" href="#int1">USD</a>
        </li>
        <li class="tab-item">
            <a class="tab-link" href="#int2">EUR</a>
        </li>
        <li class="tab-item">
            <a class="tab-link" href="#int3">GBP</a>
        </li>
    </ul>
    <section id="int1" class="tab-panel tab-panel_table">
        <table class="table-content section-one_table">
            <thead class="aria-readable">
                <tr>
                    <th scope="col">Operation</th>
                    <th scope="col">Fee</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row" class="table-content_title">
                        Foreign Exchange Purchase 1
                    </th>
                    <td class="table-content_fees table-content_special">3%</td>
                </tr>
                <tr>
                    <th scope="row" class="table-content_title">Same Currency Purchase</th>
                    <td class="table-content_fees table-content_special section-one_special">Free</td>
                </tr>
                <tr>
                    <th scope="row" class="table-content_title">
                        ATM Withdrawal <span>in card's currency</span>
                    </th>
                    <td class="table-content_fees table-content_special">$2.50</td>
                </tr>
                <tr>
                    <th scope="row" class="table-content_title">
                        ATM Withdrawal <span>in other currencies</span>
                    </th>
                    <td class="table-content_fees table-content_special">$3.50</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="int2" class="tab-panel tab-panel_table">   
        <table class="table-content section-one_table">
            ...
        </table>
    </section>
    <section id="int3" class="tab-panel tab-panel_table">  
        <table class="table-content section-one_table">
            ...
        </table>
    </section>
</div><!-- Closes .js-tab-widget -->
                                

.tab-list {
    color: $green;
    display: flex;
    margin-top: 2.5em;
    border-bottom: 1px solid rgba($black, 0.1);
}

.tab-item{
    flex-grow: 1;
}

.tab-link[data-tab-active] {
    color: $green;
}

.tab-link {
    color: rgba($black, 0.5);
    text-decoration: none;
    display: block;
    padding: 0.6em;
    text-align: center;
    position: relative;
}

.tab-panel[aria-hidden="true"] {
    display: none;
}
.tab-panel[data-tab-active] {
    transform: translateY(-10px);
    opacity: 0;
    will-change: opacity, transform;
    animation: show 1s forwards;
}

th{
    font-weight: 500;
    color: rgba($black, 0.8);
    @media (min-width: $screen-md-min){
        color: rgba($black, 0.8);
    }
}

.table-content{
    width: 100%;
    margin-top: 1em;

    caption{
        text-align: left;
        font-weight: 500;
        font-size: 1.15em;
        line-height: 1.3;
        color: $black;
        max-width: 180px;
        padding-left: 1em;
    }

    tr{
        border-bottom: 1px solid rgba($black, 0.1);
    }

    &_title{
        font-weight: 500;
        text-align: left;
        padding: 1em;
        font-size: 1.15em;
        line-height: 1.3;
        span{
            font-size: 0.9em;
            line-height: 1.5;
            color: rgba($black, 0.8);
            font-weight: 300;
            display: block;
        }
    }
    
    &_fees{
        text-align: center;
        padding: 1em;
    }

    &_special{
        background-color: $bg;
        font-family: 'Roboto Mono', monospace;
        color: rgba($black, 0.6);
    }
}

.section-one_special{
    text-transform: uppercase;
}

.section-one_table{
    tr:last-child{
        border-bottom: none;
    }
}

@media (min-width: $screen-xs-max){
    .tab-list{
        margin-top: 3em;
    }
    .tab-link{
        padding: 1em;
    }
    .tab-item{
        flex-grow: initial;
    }
    .table-content{
        caption{
            max-width: 180px;
        }
        &_title{
            font-size: 1em;
            line-height: 1.5;
            span{
                display: inline;
            }
        }
        .section-one &_special{
            width: 40%;
        }
    }

    .section-one{
        .break{
            display: inline;
        }
    }
}
                                

Text Fields

Text fields allow users to input, edit, and select text. They are located in forms.

This is not a valid e-mail address
This is not a valid e-mail address

<!-- Add class .light or .dark accordingly. -->
<div class="light">
    <input type="text" class="standard-item_input" placeholder="Hint Text">
    <input type="text" class="standard-item_input" placeholder="..." disabled>
    <input type="email" class="standard-item_input">
    <div class="invalid-message">
        <span><%= t('new-landing.email') %></span>
        <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
            <use xlink:href="#iconWarning"></use>
        </svg>
    </div><!-- Closes .invalid-message -->
</div>
                                

.light{
	input{
		color: $black;
		border-bottom: 1px solid $black2;
		&.standard-cta{
			border-bottom: none;
		}
	}
}
.dark{
	input{
		color: $white;
		border-bottom: 1px solid rgba($white, 0.2);
		&.standard-cta{
			border-bottom: none;
		}
	}
}

.invalid-message{
	opacity: 0;
	display: flex;
	color: $red;
	font-size: 11px;
	text-transform: uppercase;
	margin-top: 0.4em;
	align-items: center;
	span{
		flex-grow: 1;
	}
	@media (min-width: $screen-xs-max){
		margin-right: auto;
		margin-left: auto;
		max-width: 256px;
	}
	@media (min-width: $screen-lg-max){
		max-width: 342px;
	}
}
.standard-item{
	&_input{
		font-size: 16px;
		line-height: 1.5;
		display: block;
		width: 100%;
		padding-bottom: 0.4em;
		@media (min-width: $screen-xs-max){
			margin-right: auto;
			margin-left: auto;
			max-width: 256px;
		}
		@media (min-width: $screen-md-min){
			margin-right: 0;
		}
		@media (min-width: $screen-lg-max){
			max-width: 342px;
		}
		&:focus:valid{
			border-bottom-color: $green;
			border-bottom-width: 2px;
		}
		&:invalid{
			box-shadow: none;
			border-bottom-color: $red;
			border-bottom-width: 2px;
			~ .invalid-message{
				opacity: 1;
			}
		}
		&[disabled]{
			opacity: 0.8;
			border-bottom-style: dotted;
		}
	}
}
                                

Registration Banner

The main call to action for signing-up.

Open in new tab

<div class="registration-banner">
    <div class="registration-banner_first section-margin">
        <div class="section-padding">
            <h2 class="standard-item_title">
                Take control over your money
            </h2>
            <p class="standard-item_text">
                You choose how to spend your money, Xapo makes it happen.
            </p>
        </div>
    </div>
    <div class="registration-banner_second section-padding dark">
        <h2 class="standard-item_title registration-banner_title">
            Open your account in less than 2 minutes.
            <span class="tablet-no">It's free.</span>
        </h2>

        <form class="registration-banner_form" action="#" method="get">
            <input type="email" aria-label="Enter your Email" placeholder="Enter your Email" class="standard-item_input">
            <div class="invalid-message">
                <span><%= t('new-landing.email') %></span>
                <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#iconWarning"></use>
                </svg>
            </div><!-- Closes .invalid-message -->
            <input type="submit" value="Register for Free" class="standard-cta standard-cta_button registration-banner_button">
        </form>
    </div>
</div>
                                

.registration-banner{
	&_first{
		background-color: $white;
		position: relative;
	}
	&_second{
		color: $white;
		background-color: $black;
		box-shadow: 0 -104px 0 0 $black;
		padding: 64px 32px;
	}
	&_title{
		font-weight: 300;
		max-width: 456px;
		.dark &{
			color: $white;
		}
	}
	&_button{
		margin: auto;
		margin-top: 16px;
		width: 100%;
		&.standard-cta{
			display: block;
		}
	}
	@media (min-width: $screen-xs-max){
		&_second{
			display: flex;
			justify-content: space-around;
			padding: 104px 72px 88px;
			box-shadow: 0 -72px 0 0 $black;
		}
		&_title{
			max-width: 266px;
		}
		&_form{
			flex-basis: 100%;
			margin-left: 24px;
		}
	}
	@media (min-width: $screen-md-min){
		&_second{
			justify-content: space-between;
		}
		&_title{
			max-width: 60%;
		}
		&_button{
			margin-right: 0;
		}
		&_form &_invalid{
			margin-right: 0
		}
	}
	@media (min-width: $screen-lg-max){
		&_second{
			padding: 126px;
			box-shadow: 0 -104px 0 0 $black;
		}
		&_title{
			min-width: 640px;
			max-width: 70%;
			padding-right: 40px;
		}
		&_form{
			flex-basis: 70%;
		}
	}
}
                                

Layout

Keylines & Spacing

The following examples contain spacing guidance for elements on mobile, tablet, and desktop.

Open in new tab

<section class="testimonials-block">
    <div class="testimonials-info">
        <h2 class="standard-item_title">
            Who are we looking for
        </h2>
        <p class="standard-item_text">
            We want talented, driven individuals to join a global team that’s going to change the way things are done. 
        </p>
    </div>

    <blockquote class="testimonials">
        <p class="standard-item_text testimonials-quote">
            My favorite aspect of working at Xapo is being part of a group of very talented individuals who are committed to challenge issues at the frontier of technology and finance.
        </p>
        <footer class="testimonials-person">
            <cite class="testimonials-person_wrapper">
                <img src="<%= image_path('careers/testimonials-wences.png') %>" alt="Name" class="testimonials-person_img">
                <p>
                    <span>
                        Wences Casares
                    </span>
                    <br><span class="testimonials-person_location">
                        CEO & Founder of Xapo
                    </span>
                </p>
            </cite>
        </footer>
    </blockquote>
</section>
                                

.testimonials{
    padding-top: 32px;
    &-block{
        background-color: $white;
        padding: 40px 32px;
        .section-padding{
            padding-bottom: 0;
        }
    }
    &-quote{
        padding-right: 0;
        padding-left: 20px;
        color: $green;
        font-style: italic;
        border-left: 4px solid $light-green;
    }
    &-person{
        font-size: 14px;
        line-height: 1.2;
        &_wrapper{
            display: flex;
            align-items: center;
            margin-top: 24px;
        }
        &_location{
            color: $black7;
            line-height: 2;
            font-size: 11px;
            font-weight: 400;
            text-transform: uppercase;
        }
        &_img{
            margin-right: 8px;
            margin-left: 0;
            border-radius: 50%;
            border: 1px solid $white;
            box-sizing: content-box;
        }
    }
    &-header{
        padding-left: 48px;
        padding-right: 48px;
    }
    @media (min-width: $screen-xs-max){
        max-width: 380px;
        flex-basis: 100%;
        padding-top: 0;
        &-info{
            padding-right: 40px;
            flex-basis: 100%;
        }
        &-block{
            display: flex;
            align-items: center;
            padding: 96px 48px 64px;
        }
        &-person_wrapper{
            margin-top: 16px;
        }
        &-person_img{
            margin-left: 24px;
            margin-right: 16px;
        }
    }
    @media (min-width: $screen-md-min){
        max-width: 480px;
        &-info{
            padding-right: 72px;
            flex-basis: initial;
        }
        &-block{
            padding: 96px 64px;
        }
    }
    @media (min-width: $screen-lg-max){
        max-width: 520px;
        &-block{
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
        }
        &-info{
            padding-right: 88px;
        }
        &-block{
            padding: 104px 96px;
        }
    }
}
                                

Testimonials

Multiple testimonials are displayed using a JavaScript slider.

Open in new tab

<div class="testimonials-swiper">
    <article>
        <header class="testimonials-header">
            <h3 class="standard-item_title">
                A single mission
            </h3>
            <p class="standard-item_text">
                Join a worldwide team working remotely.
            </p>
        </header>

        <div class="swiper-container carousel">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <blockquote>
                        <p class="swiper-slide_testimonial">
                            Asit amet, consectetur adipiscing elit, incididunt ut labore minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
                        </p>
                        <footer>
                            <cite class="testimonials-person_wrapper">
                                <img src="<%= image_path('careers/testimonials-wences.png') %>" alt="Wences Casares" class="testimonials-person_img">
                                <p>
                                    <span>
                                        Wences · Xapo
                                    </span>
                                    <br><span class="testimonials-person_location">
                                        Founder of Xapo
                                    </span>
                                </p>
                            </cite>
                        </footer>
                    </blockquote>
                </div>
                
                <div class="swiper-slide">
                    ...
                </div>
            
                <div class="swiper-slide">
                    ...
                </div>

            </div><!-- Closes .swiper-wrapper -->

            <div class="swiper-pagination"></div>
                
            <button class="swiper-button-prev" aria-label="previous"></button>
            <button class="swiper-button-next" aria-label="next"></button>

        </div><!-- Closes .carousel -->
    </article>
</div><!-- Closes .testimonials-swiper -->
                                

// The code required for this section can be found in the following partials:
@import "styleguide/swiper";
@import "styleguide/testimonials";
                                

Resources

Icons


<!-- Using Symbols: complete width, height and viewBox accordingly -->
<svg width="00px" height="00px" viewBox="0 0 00 00" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="#icon"></use>
</svg>

<!-- Place the Symbols' sprite at the bottom of your page -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="iconWarning" fill="#FF3B30" height="18" viewBox="0 0 24 24" width="18">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
    </symbol>
    <symbol id="arrow">
        <title>Dropdown Arrow</title>
        <polygon points="0 0 10 0 5 5" opacity="0.5"></polygon>
    </symbol>
    <symbol id="langIcon">
        <title>Language Icon</title>
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
    </symbol>
    <symbol id="facebook">
        <title>Facebook</title>
        <path fill="#00C2B2" d="M17.0922368,32.5 L1.76615435,32.5 C0.790448438,32.5 0,31.709061 0,30.7337352 L0,2.26614064 C0,1.29056647 0.790572605,0.5 1.76615435,0.5 L30.2339698,0.5 C31.2093032,0.5 32,1.29056647 32,2.26614064 L32,30.7337352 C32,31.7091852 31.2091791,32.5 30.2339698,32.5 L22.0795369,32.5 L22.0795369,20.1078364 L26.2390141,20.1078364 L26.8618368,15.2783904 L22.0795369,15.2783904 L22.0795369,12.1950943 C22.0795369,10.7968582 22.4678077,9.84400646 24.4728598,9.84400646 L27.0302076,9.84288896 L27.0302076,5.5233937 C26.587924,5.4645389 25.0698557,5.33304685 23.3037013,5.33304685 C19.6165561,5.33304685 17.0922368,7.58368417 17.0922368,11.7168059 L17.0922368,15.2783904 L12.9220812,15.2783904 L12.9220812,20.1078364 L17.0922368,20.1078364 L17.0922368,32.5 L17.0922368,32.5 Z"></path>
    </symbol>
    <symbol id="twitter">
        <title>Twitter</title>
        <path fill="#00C2B2" d="M28.5636556,4.26890574 C29.9197629,3.42643554 30.9603217,2.09057421 31.4505488,0.499241603 C30.1808417,1.27930661 28.7777778,1.8468039 27.2789223,2.15102925 C26.0843458,0.826868906 24.377003,1.77635684e-15 22.4874685,1.77635684e-15 C18.8642954,1.77635684e-15 15.9248107,3.05200433 15.9248107,6.81581798 C15.9248107,7.35016251 15.9811587,7.86890574 16.0938546,8.36814735 C10.6374949,8.08342362 5.80096261,5.37269772 2.56095557,1.24420368 C1.99559782,2.25438787 1.67253624,3.42643554 1.67253624,4.67453954 C1.67253624,7.03813651 2.83142572,9.1248104 4.59323825,10.3475623 C3.51887069,10.3144095 2.50460762,10.0043337 1.61806656,9.49729144 L1.61806656,9.58114843 C1.61806656,12.8847237 3.88137583,15.6403034 6.88659975,16.2643554 C6.33626812,16.4242687 5.75588425,16.5042254 5.15671773,16.5042254 C4.73410812,16.5042254 4.32088983,16.4632719 3.92081939,16.3833153 C4.7566473,19.0901408 7.17960909,21.0617551 10.0533545,21.1144095 C7.80694958,22.943662 4.97452603,24.0338028 1.8998063,24.0338028 C1.37013559,24.0338028 0.846099665,24.0026002 0.333333333,23.940195 C3.23900922,25.8708559 6.6912602,27 10.397077,27 C22.4743206,27 29.0764219,16.6153846 29.0764219,7.60758397 C29.0764219,7.31115926 29.0707871,7.01473456 29.0595175,6.72416035 C30.3423725,5.76273023 31.4561836,4.56338028 32.3333333,3.19631636 C31.1575395,3.73846154 29.8915889,4.10509209 28.5636556,4.26890574 Z"></path>
    </symbol>
    <symbol id="youtube">
        <title>YouTube</title>
        <path fill="#00C2B2" d="M13.3626667,15.7414138 L13.3616667,6.55347225 L22.0076667,11.1632825 L13.3626667,15.7414138 Z M32.3466667,4.96134536 C32.3466667,4.96134536 32.0336667,2.70804639 31.0746667,1.71577731 C29.8576667,0.412849336 28.4936667,0.40671791 27.8686667,0.331096992 C23.3906667,0 16.6736667,0 16.6736667,0 L16.6596667,0 C16.6596667,0 9.94266667,0 5.46466667,0.331096992 C4.83866667,0.40671791 3.47566667,0.412849336 2.25766667,1.71577731 C1.29866667,2.70804639 0.986666667,4.96134536 0.986666667,4.96134536 C0.986666667,4.96134536 0.666666667,7.60807749 0.666666667,10.2537877 L0.666666667,12.7349713 C0.666666667,15.3817035 0.986666667,18.0274137 0.986666667,18.0274137 C0.986666667,18.0274137 1.29866667,20.2807127 2.25766667,21.2729817 C3.47566667,22.5759097 5.07466667,22.5350335 5.78666667,22.6709468 C8.34666667,22.9223353 16.6666667,23 16.6666667,23 C16.6666667,23 23.3906667,22.989781 27.8686667,22.658684 C28.4936667,22.5820411 29.8576667,22.5759097 31.0746667,21.2729817 C32.0336667,20.2807127 32.3466667,18.0274137 32.3466667,18.0274137 C32.3466667,18.0274137 32.6666667,15.3817035 32.6666667,12.7349713 L32.6666667,10.2537877 C32.6666667,7.60807749 32.3466667,4.96134536 32.3466667,4.96134536 L32.3466667,4.96134536 Z"></path>
    </symbol>
    <symbol id="blog">
        <title>Blog</title>
        <polygon fill="#00C2B2" points="19.9679094 0.5 16 5.04641638 12.0320906 0.5 2.07015888 0.5 11.0404279 10.5783276 -3.41060513e-13 22.5 10.3073777 22.5 16 15.9819681 21.6926223 22.5 32 22.5 20.9595721 10.5783276 30.1022495 0.5"></polygon>
    </symbol>
</svg>
                                
Dropdown Arrow Language Icon Language Icon Facebook Twitter YouTube Blog