Byggstenar
https://groovy.simplo.dev/exempel/byggstenar
Allt som går att lägga på en sida, visat som det ser ut.
Varje sida här visar en sorts innehåll. Hur du skriver det står i handboken, under Skriva.
Exempelsajt
Heroes
https://groovy.simplo.dev/exempel/byggstenar/heroes
En banner överst på sidan eller i texten, med färg, toning eller bild.
Den här sidans hero ligger överst och bär sidans titel och beskrivning. Den kan också stå i texten.
Färdiga bakgrunder
Havet
En av de 16 bakgrunder som följer med temat.
Glöd, kompakt och centrerad
Sajtens egna heroes
De här kommer från sajtens preset och har sina namn: skog, moln och fjall.
Skog
En toning i sajtens färger.
Moln
En ljus yta med mörk text.
Fjäll
En bild med en mörk ton över, så att texten går att läsa.
Kort, band och knappar
https://groovy.simplo.dev/exempel/byggstenar/kort-och-band
Delar som passar en startsida eller en översikt.
Kort
Skriv ut
En egen layout, alltid ljus.
Exportera
En sida eller en hel gren, som Word.
Utan ram, med två kolumner:
Inloggning med e-post
Inga lösenord att komma ihåg.
Skyddade sidor
Det du inte får läsa syns ingenstans.
Band
Ett mörkt band
Bandet går över hela innehållsytan, och texten står kvar i spalten.
Ett ljust band
En lugnare yta för något som ska synas lite extra.
Centrerad text
Större text i mitten, till exempel som ingress.
Knappar
Större och centrerad:
Ikonlänkar
Öppna när du vill börja, eller om du undrar vem som får göra vad.
Rutor och steg
https://groovy.simplo.dev/exempel/byggstenar/rutor
Hänvisningsrutor, neutrala rutor, steg och utfällbara avsnitt.
Hänvisningsrutor
Notering
Bra att veta.
Tips
Ett råd som sparar tid.
Viktigt
Något läsaren behöver för att lyckas.
Varning
Något som kan gå fel.
Se upp
Något som inte går att ångra.
Rutor
Läs mer
En ruta utan ikon kan innehålla allt, också en annan ruta:
En ruta i rutan.
Steg
Stegen numreras löpande på sidan.
1
Första steget
Fritt innehåll, med listor, bilder och tabeller.
2
Andra steget
Numret kommer av sig självt.
En ruta utan nummer
Räknas inte i ordningen.
Utfällbara avsnitt
Fäll ut mig
Avsnitt direkt efter varandra står ihop som ett dragspel.
Och mig
I utskrift och export står hela innehållet.
Tabeller och bilder
https://groovy.simplo.dev/exempel/byggstenar/tabeller-och-bilder
Tabellval, kod och bilder med bredd, skugga och linje.
Tabeller
Sajtens preset gör tabeller randiga.
| Tjänst | Svarstid | Tillgänglig |
|---|---|---|
| Inloggning | 120 ms | 99,9 % |
| Sök | 80 ms | 99,9 % |
| Export | 900 ms | 99,5 % |
Utan linjer, med en smal första kolumn:
| Status | Betydelse |
|---|---|
| Öppen | Väntar på en handläggare |
| Pågår | En handläggare arbetar med ärendet |
| Stängd | Ärendet är löst |
Kod
<?php
$arende = $klient->hamta(1042);
echo $arende->rubrik;Bilder
Klicka på en bild för att se den i full storlek.
Med halva bredden, till höger och med en tunn linje:
Texten flyter runt bilden. Bredd, placering, skugga och linje sätts per bild, och en bild blir aldrig högre än en viss del av fönstret.
Även en liten bild på en rad med text går bra: klicka på 
för mer information.
Filer och inbäddningar
https://groovy.simplo.dev/exempel/byggstenar/filer
PDF, Word, PowerPoint och Excel visade direkt i sidan.
Allt ritas i läsarens webbläsare. Inget skickas till någon annan tjänst. Ikonen i hörnet öppnar filen i en större vy.
Word
PowerPoint
Excel
Som vanlig länk
En vanlig länk öppnar filen i samma vy: rutin.docx, budget.xlsx.