Fingrid's web design components include web design elements, guidelines and recommendations for designers and front-end developers to utilize in Fingrid's various digital applications.

Components and examples construct more like a web style guide, not a full front-end web framework. Depending on each project with their different goals and technical requirements, it is up to developers to choose what digital components they may utilize in their projects for Fingrid.

Grid

12-Column Grid System

Fingrid’s web design components do not include a responsive grid system. You may use the grid system of your choice together with Fingrid’s components.

In the example web pages, the grid that is available in the Bootstrap framework has been used. Whenever possible, make your site fully responsive and use the grid of your choice fluently over different breakpoints.

Typography

Below you will find the specifications for Fingrid’s web typography. Fingrid’s brand font, Lab Grotesque, is the font that we use on our web pages and in web applications.

All CSS styles are fully responsive with customizable breakpoints, paddings and margins. Do not change the fonts to any other fonts than mentioned in these guidelines.

Heading styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph styles

This is the primary paragraph style, class="p1". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus urna quis dui accumsan eleifend. Nullam nulla libero, cursus ac tincidunt eget, finibus sit amet augue. Nam non lectus et nisi blandit gravida. Duis lobortis, est id euismod ultrices, velit mi dignissim est, vitae semper ipsum sem sagittis diam. Pellentesque ullamcorper vulputate luctus.

This is alternative paragraph style, class="p2". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus urna quis dui accumsan eleifend. Nullam nulla libero, cursus ac tincidunt eget, finibus sit amet augue. Nam non lectus et nisi blandit gravida. Duis lobortis, est id euismod ultrices, velit mi dignissim est, vitae semper ipsum sem sagittis diam. Pellentesque ullamcorper vulputate luctus.

This is alternative paragraph style, class="p3". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus urna quis dui accumsan eleifend. Nullam nulla libero, cursus ac tincidunt eget, finibus sit amet augue. Nam non lectus et nisi blandit gravida. Duis lobortis, est id euismod ultrices, velit mi dignissim est, vitae semper ipsum sem sagittis diam. Pellentesque ullamcorper vulputate luctus.

CSS Typography


h1 {	
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 70px;	
	font-weight: bold;	
	line-height: 80px;
}
h2 {		
	color: #3E5660;
	font-family: "Lab Grotesque";	
	font-size: 46px;	
	font-weight: bold;	
	line-height: 55px;
}
h3 {
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 38px;	
	font-weight: bold;	
	line-height: 48px;
}
h4 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 30px;	
	font-weight: bold;	
	line-height: 40px;
}
h5 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 24px;	
	font-weight: bold;	
	line-height: 33px;
}
h6 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 20px;	
	font-weight: bold;	
	line-height: 27px;
}
p {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 18px;	
	line-height: 26px;
}
.p1 {		
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 16px;	
	line-height: 23px;
}
.p2 {	
	color: #3E5660;	
	font-family: "Lab Grotesque";	
	font-size: 14px;	
	line-height: 20px;
}
	@media and screen (min-width:768px) {
		h1 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 60px;	
			font-weight: bold;	
			line-height: 71px;
		}
		h2 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 46px;	
			font-weight: bold;	
			line-height: 55px;
		}
		h3 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 38px;	
			font-weight: bold;	
			line-height: 48px;
		}
		h4 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 30px;	
			font-weight: bold;	
			line-height: 40px;
		}
		h5 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 24px;	
			font-weight: bold;	
			line-height: 33px;
		}
		h6 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 20px;	
			font-weight: bold;	
			line-height: 27px;
		}
		.p1 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 18px;	
			line-height: 26px;
		}
		.p2 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 16px;	
			line-height: 23px;
		}
		.p3 {	
			color: #3E5660;	
			font-family: "Lab Grotesque";	
			font-size: 15px;	
			line-height: 21px;
		}
	}
		@media and screen(max-width: 767px) {
				h1 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 30px;	
				font-weight: bold;	
				line-height: 35px;
			}
			h2 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 26px;	
				font-weight: bold;	
				line-height: 31px;
			}
			h3 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 22px;	
				font-weight: bold;	
				line-height: 28px;
			}
			h4 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 22px;	
				font-weight: bold;	
				line-height: 28px;
			}
			h5 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 20px;	
				font-weight: bold;	
				line-height: 26px;
			}
			h6 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 17px;	
				font-weight: bold;	
				line-height: 22px;
			}
			.p1 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 18px;	
				line-height: 26px;
			}
			.p2 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 16px;	
				line-height: 23px;
			}
			.p3 {	
				color: #3E5660;	
				font-family: "Lab Grotesque";	
				font-size: 16px;	
				line-height: 23px;
			}
		}

Links

Static link

Lorem ipsum link dolor sit amet

Hovered link

CSS Typography

 

.link {	
	color: #D5121E;	
	font-family: "Lab Grotesque";	
	font-size: 14px;	
	line-height: 22px;
	text-decoration: none;
}
.link:hover {
	text-decoration: underline;
}

Colours

Primary colour palette

Use these colours on all web pages and in web applications. More detailed recommended usage listed below.

Red

Usage in buttons, links and highlights

RGB: 213R 18G 30B
HEX: #D5121E

Bluish grey 1

Primary text colour

RGB: 62R 86G 96B
HEX: #3E5660

Bluish grey 2

Usage in buttons and background elements

RGB: 109R 131G 143B
HEX: #6D838F

Bluish grey 3

Usage in disabled elements, outlines and strokes

RGB: 213R 221G 227B
HEX: #D5DDE3

Bluish grey 4

Usage in background elements

RGB: 233R 238G 242B
HEX: #E9EEF2

Secondary colour palette

To be used as a non-dominant colour, never for example as website background. Can be used for example in infographics and graphs.

Yellow

RGB: 109R 131G 143B
HEX: #DDC720

Green

RGB: 213R 221G 227B
HEX: #009A96

Violet

RGB: 233R 238G 242B
HEX: #A15885

Navigations

As needs and requirements for the website’s header varies, examples below are not necessarily ready-to-use components. They are more like style examples on how the main navigation should look.

Always aim to build the navigation as intuitive and simple to use as possible. Avoid more than three level navigations. When necessary, use list navigations on subpages.

Main navigation bar

The navigation bar should be designed to be as simple as possible for the user.

HTML

 

<nav class="finui_nav_simple" role="navigation">

	<div class="finui_nav_container">

		<div class="finui_menu_btn">

			<button class="finui_menu_trigger" role="button">

				<span class="finui_bar"></span>

				<span class="finui_bar"></span>

				<span class="finui_bar"></span>

			</button>

		</div>

		<div class="finui_brand_logo">

			<a href="" title=""><img src="Fingrid_logo_red.svg" alt="logo"></a>

		</div>

		<div class="finui_menu">

			<ul class="finui_nav_simple_list"> 

				<li class="finui_nav_item"><a class="finui_active" href="#" >Link 1</a></li>

				<li class="finui_nav_item"><a class="" href="#">Link 2</a></li>

				<li class="finui_nav_item"><a class="" href="#">Link 3</a></li>

				<li class="finui_nav_item"><a class="" href="#">Link 4</a></li>

			</ul>

		</div>

	</div>

</nav>

CSS

 

.finui_nav_simple {
	height: 90px;
	width: 100%;
	background-color: #fff;
	padding: 0;
	margin: 0;
}
.finui_nav_container {
	display: block;
	height: 100%;
	width: 100%;
}
.finui_menu_btn {
	border: 0;
	background-color: transparent;
	display: none;
	outline: 0;
}
.finui_menu_trigger {
	border: 0;
	background-color: transparent;
	outline: 0;
}
.finui_bar {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background-color: #000;
}
.finui_brand_logo {
	float: left;
	width: 150px;
	height: 100%;
	margin-left: 10px;
}
.finui_brand_logo > a {
	display: block;
}
.finui_brand_logo > a > img {
	padding: 31px 30px;
	box-sizing: border-box;
}
.finui_menu {
	float: right;
}
.finui_nav_simple_list {
	display: inline-block;
	margin: 0;
	margin-right: 10px;
	padding: 0;

}
.finui_nav_item {
	list-style-type: none;
	float: left;
	padding: 33px 30px;
}
.finui_nav_item a {
	text-decoration: none;
	color: #6D848F;
	font-size: 20px;
}
.finui_active {
	color: #D5121E!important;
}
@media screen and (max-width: 768px) {
	.finui_menu_btn {
		display: block;
		float: right;
		margin: 31px;
	}
	.finui_menu {
		max-height: 0;
    	overflow: hidden;
		width: 100%;
	}
	.finui_menu_open {
		max-height: 3000px;
	}
	.finui_nav_item {
		display: block;
    	width: 100%;
    	padding: 16px 30px;
	}
	span.finui_bar {
	    width: 33px;
	    height: 4px;
	    margin-top: 3px;
	    background-color: #000;
	    -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	    -webkit-transition: .25s ease-in-out;
	    -moz-transition: .25s ease-in-out;
	    -o-transition: .25s ease-in-out;
	    transition: .25s ease-in-out;
	}
	span.finui_bar:nth-child(1) {
	    top: 0px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
	span.finui_bar:nth-child(2)  {
	    -webkit-transform-origin: left center;
	    -moz-transform-origin: left center;
	    -o-transform-origin: left center;
	    transform-origin: left center;
  	}
	span.finui_bar:nth-child(3)  {

	    -webkit-transform-origin: left center;
	    -moz-transform-origin: left center;
	    -o-transform-origin: left center;
	    transform-origin: left center;
	}
	.finui_menu_trigger.close-btn span.finui_bar:nth-child(1) {
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	    top: -5px;
	    left:3px;
	}
	.finui_menu_trigger.close-btn span.finui_bar:nth-child(2) {
	  	width: 0%;
	  	opacity: 0;
	}
	.finui_menu_trigger.close-btn span.finui_bar:nth-child(3) {
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    left:3px;
	}
}

 


$(window).resize( function() {

	if ($(window).width() < 900 ) {
		$(function() {
   			$(".finui_menu_trigger").click(function(e) {
        	$(".finui_menu").toggleClass("finui_menu_open");
    		});
   		});
	
		$('.finui_nav_item a').on('click', function() {
			$('.finui_nav_item a').removeClass('finui_active');
			$(this).toggleClass('finui_active');
		});
		$('.finui_menu_trigger').click( function () {
				$(this).toggleClass('close-btn');
		});
	}
});


if ($(window).width() < 900 ) {
	$(function() {
			 $(".finui_menu_trigger").click(function(e) {
    		$(".finui_menu").toggleClass("finui_menu_open");

		});

		});

	$('.finui_nav_item a').on('click', function() {
		$('.finui_nav_item a').removeClass('finui_active');
		$(this).toggleClass('finui_active');
	});
	$('.finui_menu_trigger').click( function () {
			$(this).toggleClass('close-btn');
	});
}

Dropdown navigation bar

HTML


<nav class="finui_nav_simple" role="navigation">

	<div class="finui_nav_container">

		<div class="finui_menu_dropdown_btn">

			<button class="finui_menu_dropdown_trigger" role="button">

				<span class="finui_bar"></span>

				<span class="finui_bar"></span>

				<span class="finui_bar"></span>

			</button>

		</div>

		<div class="finui_brand_logo">

			<a href="#"><img src="Fingrid_logo_red.svg" alt="Fingrid"></a>

		</div>

		<nav class="finui_dropdown_menu">

			<ul class="finui_nav_dropdown_list"> 

				<li class="finui_nav_dropdown_item"><a class="" href="#">Link 1</a>

					<ul class="finui_nav_dropdown">

						<li class="finui_dropdown_item"><a href="#">Link A</a></li>

						<li class="finui_dropdown_item"><a href="#">Link B</a></li>

						<li class="finui_dropdown_item"><a href="#">Link C</a></li>

						<li class="finui_dropdown_item"><a href="#">Link D</a></li>

						<li class="finui_dropdown_item"><a href="#">Link E</a></li>

						<li class="finui_dropdown_item"><a href="#">Link F</a></li>

					</ul>

				</li>

				<li class="finui_nav_dropdown_item"><a class="" href="#">Link 2</a>

					<ul class="finui_nav_dropdown">

						<li class="finui_dropdown_item"><a href="#">Link G</a></li>

						<li class="finui_dropdown_item"><a href="#">Link H</a></li>

						<li class="finui_dropdown_item"><a href="#">Link I</a></li>

						<li class="finui_dropdown_item"><a href="#">Link J</a></li>

						<li class="finui_dropdown_item"><a href="#">Link K</a></li>

						<li class="finui_dropdown_item"><a href="#">Link L</a></li>

					</ul>

				</li>

				<li class="finui_nav_dropdown_item"><a class="" href="#">Link 3</a>

					<ul class="finui_nav_dropdown">

						<li class="finui_dropdown_item"><a href="#">Link M</a></li>

						<li class="finui_dropdown_item"><a href="#">Link N</a></li>

						<li class="finui_dropdown_item"><a href="#">Link O</a></li>

						<li class="finui_dropdown_item"><a href="#">Link P</a></li>

						<li class="finui_dropdown_item"><a href="#">Link Q</a></li>

						<li class="finui_dropdown_item"><a href="#">Link R</a></li>

					</ul>

				</li>

				<li class="finui_nav_dropdown_item"><a class="" href="#">Link 4</a>

					<ul class="finui_nav_dropdown">

						<li class="finui_dropdown_item"><a href="#">Link S</a></li>

						<li class="finui_dropdown_item"><a href="#">Link T</a></li>

						<li class="finui_dropdown_item"><a href="#">Link U</a></li>

						<li class="finui_dropdown_item"><a href="#">Link V</a></li>

						<li class="finui_dropdown_item"><a href="#">Link W</a></li>

						<li class="finui_dropdown_item"><a href="#">Link X</a></li>

					</ul>

				</li>

			</ul>

		</nav>

	</div>

</nav>

CSS


.finui_nav_simple {
	height: 90px;
	width: 100%;
	background-color: #fff;
	padding: 0;
	margin: 0;
}
.finui_nav_container {
	display: block;
	height: 100%;
	width: 100%;
}
.finui_menu_dropdown_btn {
	border: 0;
	background-color: transparent;
	display: none;
	outline: 0;
}
.finui_menu_dropdown_trigger {
	border: 0;
	background-color: transparent;
	outline: 0;
}
.finui_bar {
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background-color: #000;
}
.finui_brand_logo {
	float: left;
	width: 150px;
	height: 100%;
	margin-left: 10px;
}
.finui_brand_logo a {
	display: block;
}
.finui_brand_logo a img {
	padding: 31px 30px;
	box-sizing: border-box;
}
.finui_dropdown_menu {
	float: right;
}
.finui_nav_dropdown_list {
	display: inline-block;
	margin: 0;
	margin-right: 10px;
	padding: 0;
}
.finui_nav_dropdown_item {
	list-style-type: none;
	float: left;
	padding: 33px 0;
}
.finui_nav_dropdown_item a {
	text-decoration: none;
	color: #6D848F;
	font-size: 20px;
	padding: 33px 30px;
}
.finui_nav_dropdown {
	background-color: #3E5660;
	width:100%;
	height: 70px;
	left: 0;
	top:90px;
	padding-left: 10px;
	position: absolute;
	display: none;
}
.finui_dropdown_open {
	display: inline-block;
}
.finui_dropdown_item {
	float: left;
	list-style-type: none;
	padding: 23px 0;
	display: inline-block;
	left: 0;
}
.finui_dropdown_item a {
	padding: 23px 30px;
	color: #D5DDE3;
}
.item-active {
	background-color: #31454D;
	color: #fff!important;
}
.finui_nav_dropdown_item a.dropdown-active {
	color: #fff!important;
	background-color: #3E5660!important;
}


@media screen and (max-width: 768px) {
	.finui_menu_dropdown_btn {
		display: block!important;
		float: right;
		margin: 31px;
	}
	.finui_menu_dropdown_trigger {
		-webkit-transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	  	transform: rotate(0deg);
	    -webkit-transition: .5s ease-in-out;
	    -moz-transition: .5s ease-in-out;
	    -o-transition: .5s ease-in-out;
	    transition: .5s ease-in-out;
	    cursor: pointer;
	}
	span.finui_bar {
	    width: 33px;
	    height: 4px;
	    margin-top: 3px;
	    background-color: #000;
	    -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
	    -o-transform: rotate(0deg);
	    transform: rotate(0deg);
	    -webkit-transition: .25s ease-in-out;
	    -moz-transition: .25s ease-in-out;
	    -o-transition: .25s ease-in-out;
	    transition: .25s ease-in-out;
	}
	span.finui_bar:nth-child(1) {
	    top: 0px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
	span.finui_bar:nth-child(2)  {
	    -webkit-transform-origin: left center;
	    -moz-transform-origin: left center;
	    -o-transform-origin: left center;
	    transform-origin: left center;
  	}
	span.finui_bar:nth-child(3)  {

	    -webkit-transform-origin: left center;
	    -moz-transform-origin: left center;
	    -o-transform-origin: left center;
	    transform-origin: left center;
	}
	.finui_menu_dropdown_trigger.close-btn span.finui_bar:nth-child(1) {
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	    top: -5px;
	    left:3px;
	}
	.finui_menu_dropdown_trigger.close-btn span.finui_bar:nth-child(2) {
	  	width: 0%;
	  	opacity: 0;
	}
	.finui_menu_dropdown_trigger.close-btn span.finui_bar:nth-child(3) {
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    left:3px;
	}	
		
	.finui_dropdown_menu {
		max-height: 0;
    	overflow: hidden;
		width: 100%;
	}
	.finui_nav_dropdown_list {
	    display: block;
	    margin: 0;
	    margin-right: 0;
	    padding: 0;
	    width: 100%;
	}
	.finui_dropdown_menu_open {
		max-height: 1000px;
		background-color: #3E5660;
		margin-top: -8px;
	}
	.finui_nav_dropdown_item {
		display: block;
    	width: 100%;
    	padding: 20px 0;
	}
	.finui_nav_dropdown_item:nth-of-type(1) {
		margin-top: 20px;

	}
	.finui_nav_dropdown_item:last-of-type {
		margin-bottom: 20px;
	}
	.finui_nav_dropdown_item a {
		padding: 20px 30px;
	}
	.finui_nav_dropdown_item a.dropdown-active {
		 background-color: #31454D!important;
		 min-width: 320px;
		 width: 100%;
	}
	.finui_nav_dropdown {
	    width: 100%;
	    height: 70px;
	    top: 0; 
	    padding-left: 0;
	    position: static; 
	    display: none;
	    height: auto;
	    background-color: #31454D;
	}
	.finui_dropdown_item {
		float: none;
		display: block;
		padding: 12px 0;
	}
	.finui_dropdown_item a {
		float: none;
		display: block;
		padding: 0 30px;
	}
	.finui_dropdown_item:nth-of-type(1) {
		padding-top: 24px;
	}
	.finui_dropdown_item:last-of-type {
		padding-bottom: 24px;
	}
}


if ($(window).width() < 768 ) {
		$(function() {
   			$(".finui_menu_dropdown_trigger").click(function(e) {
        		$('.finui_dropdown_menu').toggleClass('finui_dropdown_menu_open', 100);

    		});
   		});
	}
	$(window).resize( function(e) {
		if ($(window).width() < 768 ) {
			$(function() {
	   			$(".finui_menu_dropdown_trigger").click(function(e) {
	        		$('.finui_dropdown_menu').toggleClass('finui_dropdown_menu_open', 100);

	    		});
	   		});
		};
	});
	//open dropdown menu 
	$('.finui_nav_dropdown_list .finui_nav_dropdown_item a').click( function() {
		
		$(this).parent().siblings().find('.finui_nav_dropdown').slideUp(100);
		$(this).next('.finui_nav_dropdown').stop(true, false, true).slideToggle(100);
		return false;

	});

	var selected = '.finui_nav_dropdown_list .finui_nav_dropdown_item a'; 

	$(selected).on('click', function() {
		var p = $(this).parent();
			$('.dropdown').not(p).removeClass('dropdown-active');

		if($(this).hasClass('dropdown-active')) {
			$('.finui_nav_dropdown_item .dropdown-active').removeClass('dropdown-active');
		}
		else {
			$('.finui_nav_dropdown_item .dropdown-active').removeClass('dropdown-active');
			$(this).addClass('dropdown-active');

		}

		});
		$('.finui_nav_dropdown_item .finui_dropdown_item a').hover( function() {
			$(this).toggleClass('item-active');
		});
			
		$('.finui_menu_dropdown_trigger').click( function () {
			$(this).toggleClass('close-btn');
		});

List navigation

The list navigation can be used as a navigation aid in the content area and as mobile navigation. The navigation items should be separated from each other by line.

The type weight and size can vary depending on the content. Icons can also be used with the text links.

HTML


<nav class="finui_list_navigation">

	<ul class="finui_list_nav">

		<li class="finui_list_nav_item"><a href="#">Link C1</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C2</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C3</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C4</a></li>

		<li class="finui_list_nav_item"><a href="#">Link C5</a></li>

	</ul>

</nav>

CSS


.finui_list_navigation {
	width: 280px;
}
.finui_list_nav_item {
	list-style-type: none;
	height: 50px;
	border-top: 1px solid #D5DDE3;
}
.finui_list_nav_item:last-of-type {
	border-top: 1px solid #D5DDE3;
	border-bottom: 1px solid #D5DDE3;
}
.finui_list_nav_item a {
	text-decoration: none;
	color: #6D848F;
	margin-left: 30px;
	padding: 16px 0;
	display: block;
	font-size: 16px;
}
.finui_list_nav_item:hover {
	background-color: #D5121E;
}
.finui_list_nav_item a:hover {
	color: #fff;
}

Breadcrumb navigation

Breadcrumb navigation should be used on pages with several navigation levels.

HTML


<ul class="finui_breadcrumb_list">

  	<li class="finui_breadcrumb_item"><a href="#">Frontpage</a></li>

	<li class="finui_breadcrumb_item"><a href="#">Link 1</a></li>

	<li class="finui_breadcrumb_item"><a href="#">Link B</a></li>

	<li class="finui_breadcrumb_item">Link B3</li>

</ul>

CSS


.finui_breadcrumb_list {
	width: auto;
}
.finui_breadcrumb_item {
	list-style-type: none;
	display: inline;
}
.finui_breadcrumb_item+li:before {
	content: "/\00a0";
	padding: 0 4px;
}

.finui_breadcrumb_item a {
	text-decoration: none;
	color: #6D848F;
}
.finui_breadcrumb_item:last-of-type {
	color: #3E5660;
	font-weight: bold;
}

Buttons

Primary buttons

Buttons can be used in different widths.

Small

Recommended use with small type size and mobile applications

Medium

Recommended use with medium type size and tablet applications

Large

Recommended use with large type size and websites that are optimised for desktop

Button states

Active

Hover

Pressed

Disabled

Secondary button

Outlined

HTML


<button class="finui_small_btn" type="button">Button</button>

<button class="finui_medium_btn" type="button">Button</button>

<button class="finui_large_btn" type="button">Button</button>

<button class="finui_medium_btn_outlined" type="button">Button</button>

CSS


.finui_small_btn {
	padding: 10px 20px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	outline: none;
}
.finui_medium_btn {
	padding: 11px 23px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	outline: none;
}
.finui_large_btn {
	padding: 13px 24px;
	background-color: #D5121E;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 17px;
	outline: none;
}
.finui_medium_btn_outlined {
	padding: 11px 23px;
	background-color: transparent;
	color: #D5121E;
	border: 2px solid #D5121E;
	border-radius: 0;
	font-size: 15px;
	outline: none;
}
button:disabled {
	padding: 11px 23px;
	background-color: #C8C8C8;
	color: #E6E6E6;
	border: 0;
	font-size: 15px;
}	
button:active {
	background-color: #D5121E;
	color: #fff;
	border: 0;
}	
button:hover {
	background-color: #6D848F;
	color: #fff;
	border: 0;
}
button:focus {
	background-color: #3E5660;
	color: #fff;
	border: 0;
}

Forms

Text fields

HTML


<input class="finui_form_grey" type="text" name="" placeholder="">

<br>

<input class="finui_form_green" type="text" name="" placeholder="">

<br>

<input class="finui_form_red" type="text" name="" placeholder="">

<br>

<textarea class="finui_textarea" placeholder=""></textarea>

CSS


.finui_form_grey {
	width: 360px;
	color: #3E5660;
	font-size: 20px;
	padding: 14px 20px;
	border: 1px solid #6D848F;	
	background-color: #fff;
	outline: none;
	box-sizing: border-box;
}
.finui_form_green {
	width: 360px;
	color: #3E5660;
	font-size: 20px;
	padding: 14px 20px;
	border: 2px solid #3E5660;
	background-color: #fff;
	outline: none;
	box-sizing: border-box;
}
.finui_form_red {
	width: 360px;
	color: #3E5660;
	font-size: 20px;
	padding: 14px 20px;
	border: 2px solid #D5121E;
	background-color: #fff;
	outline: none;
	box-sizing: border-box;
}
.finui_textarea {
	width: 360px;
	height: 273px;
	color: #3E5660;
	font-size: 20px;
	padding: 11px 20px;
	border: 1px solid #6D848F;
	background-color: #fff;
	outline: none;
	resize: none;
	box-sizing: border-box;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #6D848F;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #6D848F;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #6D848F;
}
:-moz-placeholder { /* Firefox 18- */
  color: #6D848F;
}

Select field

HTML


<div class="finui_select_form_container">

	<!--[if gte IE 9]><label for="favcity" class="ie9"><![endif]-->

    <!--[if !IE]><!--><label for="option"><!--<![endif]-->

		<span class="finui_caret"></span>

		<select  id="option" name="select">

			<option value="" hidden>Select</option> 

			<option value="1">Option 1</option>

			<option value="2">Option 2</option>

			<option value="3">Option 3</option>

		</select>

	</label>

</div>

CSS


select::-ms-expand {
    display: none;
}
select {
	-webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
.finui_select_form_container {
	width: 100%;
	height: 100%;
	font-size: 20px;
  	position: relative;
  	display: inline-block;
}
.finui_select_form_container select {
	outline: none;
    -webkit-appearance: none!important;
    -moz-appearance: none !important;
  	display: block;
  	width: 360px;
  	padding: 13px 20px 13px 20px;
  	margin: 0;
	border: 1px solid #6D848F;  	
	border-radius: 0;
  	background: #fff;
  	color: #6D848F;
  	font-size: 20px;
}
.finui_select_form_container .finui_caret {
    background: #fff;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 3px;
    width: 50px;
    height: 10%;
    background: transparent; 
    pointer-events: none;
}

.finui_select_form_container .finui_caret:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    margin-top: -5px;
    pointer-events: none;
    border-top: 10px solid #6D848F;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.finui_select_form_container .finui_caret:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 28px;
    margin-top: -5px;
    pointer-events: none;
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
label[for=finui_option] select::-ms-expand {
    display: none;
}


label[for=finui_option].ie9 select {
    width: 100%;
}

Radio buttons

Radio button Radio button checked Radio button disabled

HTML


<label for="radio-one" class="finui_radiobuttons_label">

	<input type="radio" id="radio-one" name="radio"> <span id="finui_radiobtn"></span>Radio button

</label>

<label for="radio-two" class="finui_radiobuttons_label">

	<input type="radio" id="radio-two" name="radio"> <span id="finui_radiobtn"></span>Radio button checked

</label>

<label for="radio-three" class="finui_radiobuttons_label">

	<input type="radio" id="radio-two"  name="radio"> <span id="finui_radiobtn_disabled"></span>Radio button disabled

</label>

CSS


[type="radio"] {
  	border: 0;
  	height: 1px; 
  	margin: -1px;
  	padding: 0;
  	position: absolute;
  	width: 1px;
  	visibility: hidden;
}
.finui_radiobuttons_label {
  	display: block;
  	cursor: pointer;
  	line-height: 40px;
  	font-size: 14px;
  	margin: 8px;
}
span#finui_radiobtn {
    font-size: 20px;
    line-height: 20px;
}
span#finui_radiobtn_disabled {
    font-size: 20px;
    line-height: 20px;
}
[type="radio"] + span#finui_radiobtn:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #D5DDE3;
  vertical-align: -0.25em;
  border-radius: 1em;           
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.1em #3E5660;  
  margin-right: 0.75em;
  transition: 0.5s ease all;   
}
[type="radio"] + span#finui_radiobtn_disabled:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #D5DDE3;
  vertical-align: -0.25em;
  border-radius: 1em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.1em #E9EEF2;
  margin-right: 0.75em;
  transition: 0.5s ease all;
}
[type="radio"]:checked + span#finui_radiobtn:before {
    background-color: #3E5660!important;
    box-shadow: 0 0 0 0.1em #3E5660;
}

Checkboxes

Checkbox
Checkbox checked
Checkbox invalid
Checkbox disabled

HTML


<ul class="finui_checkbox_list">

  	<li>

	    <input class="finui_checkbox" id="checkbox-1" type="checkbox" value="value1">

	    <label for="checkbox-1">Checkbox</label>

  	</li>

  	<li>

	    <input class="finui_checkbox" id="checkbox-2" type="checkbox" value="value2" checked>

	    <label for="checkbox-2">Checked</label>

  	</li>

  	<li>

	    <input class="finui_checkbox finui_checkbox_invalid" id="checkbox-3" type="checkbox" value="value3">

	    <label for="checkbox-3">Invalid checkbox</label>

  	</li>

  	<li>

	    <input class="finui_checkbox" id="checkbox-4" type="checkbox" value="value4" disabled>

	    <label for="checkbox-4">Disabled checkbox</label>

  	</li>

</ul>

CSS


.finui_checkbox_list {
  margin: 0;
  padding: 0;
  list-style-type: none; 
}
.finui_checkbox {
    position: absolute!important;
    opacity: 0; 
}
.finui_checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
    line-height: 24px; 
}
.finui_checkbox + label:before {
    content: '';
    margin-top: -1px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background: white;
    border: 1px solid #3E5660; 
}
.finui_checkbox + label:after {
    line-height: 24px;
}
.finui_checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto; 
    font-size: 14px;    
}
.finui_checkbox:disabled + label:before {
    box-shadow: none;
    border: 1px solid #D5DDE3;
}
.finui_checkbox:checked + label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 12px;
    line-height: 24px;
    background: #3E5660;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 #3E5660, 4px 0 0 #3E5660, 4px -2px 0 #3E5660, 4px -4px 0 #3E5660, 4px -6px 0 #3E5660, 4px -8px 0 #3E5660, 4px -10px 0 #3E5660;
    transform: rotate(45deg); 
}
.finui_checkbox_invalid + label:before {
    border: 1px solid #D5121E; 
}

Toggle

Toggle button off

Toggle button on

Toggle button disabled

HTML


<div class="finui_toggle_btn_container">

  <label class="finui_toggle_switch_container">

      <input type="checkbox" checked>

      <span class="finui_toggle_btn"></span>

  </label><div class="finui_toggle_text">Toggle button text</div>

</div>

<div class="finui_toggle_btn_container">

  <label class="finui_toggle_switch_container">

      <input type="checkbox" disabled>

      <span class="finui_toggle_btn finui_toggle_btn_disabled"></span>

  </label><div class="finui_toggle_text">Toggle button disabled</div>

</div>

CSS


.finui_toggle_switch_container {
  	position: relative;
  	width: 48px;
  	height: 24px;
  	display: inline-block;
  	vertical-align: middle;
  	margin: 10px 0;
}
.finui_toggle_switch_container input {
  	display:none;
}
.finui_toggle_btn {
  	position: absolute;
  	cursor: pointer;
  	border: 1px solid #3E5660;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	background-color: #fff;
    -webkit-transition: .4s;
  	transition: .4s;
  	border-radius: 34px;
}
.finui_toggle_btn_disabled {
  	border: 1px solid #D5DDE3;
}
.finui_toggle_btn:before {
  	position: absolute;
  	content: "";
  	height: 10px;
  	width: 10px;
  	left: 8px;
  	right: 8px;
  	bottom: 6px;
  	background-color: #D5DDE3;
    -webkit-transition: .4s;
  	transition: .4s;
  	border-radius: 50%;
}
.finui_toggle_switch_container input:checked + .finui_toggle_btn {
  	background-color: #fff;
  
}
.finui_toggle_switch_container input:focus + .finui_toggle_btn {
  	box-shadow: 0 0 1px #2196F3;
}
.finui_toggle_switch_container input:checked + .finui_toggle_btn:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
  	transform: translateX(26px);
  	right: 8px!important;
  	height: 14px;
  	width: 14px;
  	top: 4px;
  	left: 0px;
  	background-color: #3E5660;
}
.finui_toggle_btn:after {
 	width: 14px;
  	height: 14px;
}
.finui_toggle_text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
}

Effects

Effects used in digital applications are, in this context, related to hovering and animating of elements, as well as page scrolling.

The starting point for effects is to create a modern look & feel and to subtly emphasize the choices made by the user. Prefer using effects like fading, parallax scrolling and subtle sliding. Avoid using effects like bouncing, rotating, wobbling or flipping.

Examples of recommended effects can be found from this brand guidelines.

UI icons

Red UI icons (social media, arrows, etc.)

ZIP package includes SVG and PNG files in RGB colours

.zip

0.1 Mb

White UI icons (social media, arrows, etc.)

ZIP package includes SVG and PNG files in RGB colours

.zip

0.1 Mb

Contextual icons

Contextual icons refer to certain subject matters that relate to Fingrid and its operations. Distinct from small icons, contextual icons can also be used in bigger sizes as illustrative visual elements.

Red contextual icons for web

ZIP package includes SVG and PNG vector files in RGB colours

.zip

0.1 Mb

White contextual icons for web

ZIP package includes SVG and PNG vector files in RGB colours

.zip

0.1 Mb

Brand guidelines

Introduction

Grid

12-Column Grid System

Typography

Heading styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph styles

Links

Colours

Primary colour palette

Red

Bluish grey 1

Bluish grey 2

Bluish grey 3

Bluish grey 4

Secondary colour palette

Yellow

Green

Violet

Navigations

Main navigation bar

Dropdown navigation bar

List navigation

Breadcrumb navigation

Buttons

Primary buttons

Button states

Secondary button

Forms

Text fields

Select field

Radio buttons

Checkboxes

Toggle

Effects

UI icons

Contextual icons