Puff

Puffar används för att lyfta fram ett särskilt innehåll lite extra. Puffen består av en bild, rubrik och kort förklarande text. Puffen länkas sedan till relevant sida på webbplatsen.

Ibland är det mer effektivt att använda en ikon istället för bild för att illustrera ett puffinnehåll. Ikonen behandlas då i ett bildredigeringsprogram för att få rätt utseende.

Generera ikonbild

Ikonen ska vara 30px bred och ligga på en rund platta som är 100px i diameter. Lägg sedan plattan på en färgad bakgrund med rätta proportionerna (se nedan). Färgerna i bilden bör samverka med webbplatsens övriga färger.

Ikoner bör hämtas från familjen iOS från icon8.com.

https://icons8.com/icon/set/design/ios

Egenskaper puff

Bredd: en tredjedel av sidans bredd (= 4 kolumner i ett 12-kolumners grid)

Höjd: ≈ 43 % av puffens bredd

Tjocklek ram: 1px

Färg ram: #D7D6D2

padding: 20px

font-family: Open Sans, Arial, Helvetica, sans-serif

font-size text: 16px

font-size rubrik: 28px

Mouseover: ändra bakgrundsfärg på hela ytan, ingen understrykning

Klickyta: hela ytan

Exempel