This is a starting point for services that demonstrates an overall feel and how to structure the homepage navigation. Individual service design will vary greately depending on the needs addressed.

Browse

On the homepage, don't use a strip of navigation

Results

It's more user friendly to put the navigation into squares like these

Download

It allows users to explore the content

Help

And also read about what to expect in each section

About this service

A thing provides functional analysis of proteins by classifying them into families and predicting domains and important sites.

In the spotlight

This could be text information, or a nested form. Or you might not want tabs at all, use the code needed for your service. You can also include non-Visual Framework JS and CSS, as the VF won't break your other code.

Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.

Phasellus ac tristique orci. Nulla maximus justo nec dignissim consequat. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, pellentesque ac ante. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.

To promote molecular biology across Europe

To create a centre of excellence for Europe's leading young molecular biologists

One card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos? Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

A card here

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Another card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?

Source code

You can see the Nunjucks template for this page. This is particularly helpful if you're building a page with Nunjucks or vf-eleventy.