Categorisation (Optional) | Structural Biology

Online scientific resource

Open data resources of code, functions and things of data

An example landing page for an online scientific service such as a bioinformatics database, tool or similar.

See more Visual Framework patterns

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.

We also offer an advanced search | Example searches: Example, Example, Example

Browse

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

Results

It's more user friendly to put the navigation into sqaures 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.

Missions

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.

This is a demonstration "Online scientific resource" page.