menu

Ö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. Öarna kan även ha fler olika typer av innehåll så som bild, text, piktogram, video eller kombination av dessa. Vidare så kan dom ha mycket eller lite innehåll för att skapa kontrast mot innehåll som ligger över eller under ön.

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. Fullbreddsvarianten får bara ligga överst (direkt under hero) eller längst ner på sidan precis innan sidfoten. Skillnaden mellan än ö och en Hero är ön är mycket lägre på höjden och behöver inte ha en CTA.

Samlingssida med många olika varianter av öar.

Fullbredsö

Har alltid samma bredd som browserfönstret och finns i flera varianter.

Tänk på

  • Fullbreddsöar får endast användas direkt ovanför sidfoten eller omedelbart efter fullbredds hero.
  • Tänk igenom användande av foton och piktogram
  • En lockande rubrik
  • En beskrivande ingress på max 140 tecken
  • CTA (knappen) ska uppmanar eller visa på vad som händer när jag klickar
  • Primärknapp har alltid en linje runt sig på fullbreddsöar
  • Placera inte två öar efter varandra

Rekommenderad placering

  • Direkt efter fullbredshero
  • Direkt innan sidfot

Kan exempelvis användas på nivåerna:

  • sodra.com
  • sodra.com/Om Södra
  • sodra.com/Om Södra/Pressrum
  • sodra.com/Om Södra/Pressrum/Tjänster

1/2 text

  • Rubrik + text + CTA + bakgrundsfärg eller vit bakgrund
  • Rubrik + text + bakgrundsfärg eller vit bakgrund

Exempel

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?

1/3 bild + 2/3 text vänster/höger

  • Rubrik + text + CTA + piktogram + bakgrundsfärg eller vit bakgrund
  • Rubrik + text + piktogram + bakgrundsfärg eller vit bakgrund

Exempel

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.

2/3 bild + 1/3 text vänster/höger

  • Rubrik + text + CTA + piktogram + bakgrundsfärg eller vit bakgrund
  • Rubrik + text + piktogram + bakgrundsfärg eller vit bakgrund

Exempel

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.

Boxad Ö

Har alltid samma bredd som innehållsytan på sidan och finns i flera varianter.

Tänk på

  • Boxade öar kan användas överallt
  • Placera inte två öar efter varandra
  • Tänk igenom användande av foton och piktogram
  • En lockande rubrik
  • En beskrivande ingress på max 140 tecken
  • CTA (knappen) ska uppmanar eller visa på vad som händer när jag klickar
  • Knappar skrivs ut utan ram

Rekommenderad placering

  • Direkt efter pageheader
  • Mitt på sidan
  • Direkt innan sidfot

Kan exempelvis användas på nivåerna:

  • sodra.com
  • sodra.com/Om Södra
  • sodra.com/Om Södra/Pressrum
  • sodra.com/Om Södra/Pressrum/Tjänster

1/2 text

  • Rubrik + text + CTA + bakgrundsfärg eller vit bakgrund
  • Rubrik + text + bakgrundsfärg eller vit bakgrund

Exempel

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?

1/3 bild + 2/3 text vänster/höger

  • Rubrik + text + CTA + piktogram + bakgrundsfärg eller vit bakgrund
  • Rubrik + text + piktogram + bakgrundsfärg eller vit bakgrund

Exempel

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.

2/3 bild + 1/3 text vänster/höger

  • Rubrik + text + CTA + piktogram + bakgrundsfärg eller vit bakgrund
  • Rubrik + text + piktogram + bakgrundsfärg eller vit bakgrund

Exempel

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.

Bakgrundsbild

  • Endast bakgrundsbild

Exempel

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.

Ö med video

Video från exempelvis YouTube och Vimeo kan bäddas in i en ö på samma sätt som en bild. För att den ska anpassa sin storlek rätt behöver man rama in den med <div class="video"></div>. Se exemplet nedan.

Exempel

Södra visar vägen

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 visar vägen

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.