menu

Puffar

Ingångar

Ingångar används för att leda användare vidare till mer innehåll. De kan t.ex. placeras i början av en huvudsida för att lyfta fram viss innehåll där eller efter en artikel för att lyfta fram relaterat innehåll.

Personalisering

Ingångarna är ett perfekt stället att personalisera innehåll. Baserat på vem det är som besöker sidan kan vad som visas här anpassas efter deras intresseområden.

Exempel

Ingångar kan varieras på många olika sätt. Här visar vi två olika exempel på hur de kan se ut.

Redaktionella

Redaktionella puffar länkar till antingen artiklar, infosidor eller en blandning av dessa. Innehållet i dessa är automatgenererat och kan t.ex. bestå av en nyhetslistning eller en matchning av innehåll utifrån taggning (relaterat innehåll).

Södras avsikt är att bli komplett träleverantör till projekt i Europa

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto non ullam explicabo nisi sed sint modi assumenda quo quidem!

“Dubbelt så mycket miljöhänsyn vid avverkning än vad Skogstyrelsen tidigare angett”

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, vim at omnium reprehendunt, quot quodsi indoctum.

Södras avsikt är att bli komplett träleverantör till projekt i Europa

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto non ullam explicabo nisi sed sint modi assumenda quo quidem!

“Dubbelt så mycket miljöhänsyn vid avverkning än vad Skogstyrelsen tidigare angett”

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, vim at omnium reprehendunt, quot quodsi indoctum.

Södras avsikt är att bli komplett träleverantör till projekt i Europa

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto non ullam explicabo nisi sed sint modi assumenda quo quidem!

“Dubbelt så mycket miljöhänsyn vid avverkning än vad Skogstyrelsen tidigare angett”

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, vim at omnium reprehendunt, quot quodsi indoctum.

Södras avsikt är att bli komplett träleverantör till projekt i Europa

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto non ullam explicabo nisi sed sint modi assumenda quo quidem!

“Dubbelt så mycket miljöhänsyn vid avverkning än vad Skogstyrelsen tidigare angett”

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, vim at omnium reprehendunt, quot quodsi indoctum.

Södras avsikt är att bli komplett träleverantör till projekt i Europa

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto non ullam explicabo nisi sed sint modi assumenda quo quidem!

“Dubbelt så mycket miljöhänsyn vid avverkning än vad Skogstyrelsen tidigare angett”

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, vim at omnium reprehendunt, quot quodsi indoctum.

Södras avsikt är att bli komplett träleverantör till projekt i Europa

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto non ullam explicabo nisi sed sint modi assumenda quo quidem!

“Dubbelt så mycket miljöhänsyn vid avverkning än vad Skogstyrelsen tidigare angett”

MEDLEMSINFO 10 FEB 2015

Lorem ipsum dolor sit amet, vim at omnium reprehendunt, quot quodsi indoctum.

Öar

Öar används för att lyfta fram ett innehåll extra mycket. De kan användas i början av en sida eller för att bryta av en sida längre ner.

Exempel

Alla öar kan antingen hålla sig inom den vanliga ramen för webbplatsen eller vara fullbredd så att den bakomliggande plattan går ända ut till kanterna i webbläsarens fönster. Detta åstadkommer man genom att placera den i en yta (<surface>) med klassen .is-full. Se kodexemplen för liten och stor bild.

OBS! Fullbreddsvarianten får bara ligga överst (direkt under hero) eller längst ner på sidan precis innan sidfoten. Gå in på Exempelwebben för att se exempel.

Samlingssida med många olika varianter av öar.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Man kan välja om man vill ha texten till vänster eller höger genom att lägga klasserna .is-left eller .is-right på island-elementet. Texten vänsterställd per default.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Tips: Du kan välja att ha bilden till vänster eller höger genom att placera den före eller efter texten i källkoden.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Tips: Du kan välja att ha bilden till vänster eller höger genom att placera den före eller efter texten i källkoden.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Södra driver utvecklingen mot framtidens skogsbruk.

Lorem ipsum dolor sit amet, at cum labores omnesque, at populo putant his. Cu tempor intellegat neglegentur qui, duis iriure cum et, zril fabulas eos ei. Vis id mundi facete moderatius, has unum habemus ne. Ut mei adipiscing definiebas.

Per default är bakgrundsfärgen limegrön men går att sätta till andra färger också via .is-blue, .is-green_50 o.s.v. Observera dock att till skillnad från andra öar måste det här sättas på själva island-elementet och inte på surface-elementet.

OBS: Den här ön får inte användas i fullbredd!

Södra driver utvecklingen mot framtidens skogsbruk

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rerum reprehenderit tempora, architecto optio, omnis fugiat aliquid consectetur, reiciendis libero.


Södra driver utvecklingen mot framtidens skogsbruk

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rerum reprehenderit tempora, architecto optio, omnis fugiat aliquid consectetur, reiciendis libero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam enim reprehenderit recusandae quam explicabo fuga commodi, deleniti porro suscipit, dignissimos nisi, aperiam veniam? Labore recusandae aut natus, magni dolorum ut?