# Byggstenar

> Exempelsajt · 2026-10-30 · 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*.

> [!SUBPAGES 1 descriptions]

## Heroes

En banner överst på sidan eller i texten, med färg, toning eller bild.

[Till korten och banden](<https://groovy.simplo.dev/exempel/byggstenar/kort-och-band>)

Den här sidans hero ligger överst och bär sidans titel och beskrivning. Den kan också stå i texten.

### Färdiga bakgrunder

> [!HERO ocean]
> ## Havet
>
> En av de 16 bakgrunder som följer med temat.

> [!HERO ember compact center]
> ## Glöd, kompakt och centrerad

> [!HERO mint dark-text button-accent]
> ## Mynta, med mörk text
>
> [En knapp i accentfärgen](https://groovy.simplo.dev/exempel/kom-igang/snabbstart)

### Sajtens egna heroes

De här kommer från sajtens preset och har sina namn: `skog`, `moln` och `fjall`.

> [!HERO skog]
> ## Skog
>
> En toning i sajtens färger.

> [!HERO moln compact]
> ## Moln
>
> En ljus yta med mörk text.

> [!HERO fjall tall center]
> ## Fjäll
>
> En bild med en mörk ton över, så att texten går att läsa.

## Kort, band och knappar

Delar som passar en startsida eller en översikt.

### Kort

> [!CARDS 3]
> [!CARD search]
> ### Sök
> Hittar i alla sidor du får läsa.
>
> [Till frågorna](https://groovy.simplo.dev/exempel/guider/vanliga-fragor)
>
> [!CARD printer]
> ### Skriv ut
> En egen layout, alltid ljus.
>
> [!CARD file-down]
> ### Exportera
> En sida eller en hel gren, som Word.

Utan ram, med två kolumner:

> [!CARDS 2 plain center]
> [!CARD mail]
> ### Inloggning med e-post
> Inga lösenord att komma ihåg.
>
> [!CARD lock]
> ### Skyddade sidor
> Det du inte får läsa syns ingenstans.

### Band

> [!BAND dark center]
> ## Ett mörkt band
>
> Bandet går över hela innehållsytan, och texten står kvar i spalten.
>
> > [!BUTTONS center]
> > [Kom igång](https://groovy.simplo.dev/exempel/kom-igang/snabbstart)
> > [Läs guiderna](https://groovy.simplo.dev/exempel/guider "secondary")

> [!BAND light]
> ## Ett ljust band
>
> En lugnare yta för något som ska synas lite extra.

### Centrerad text

> [!CENTER large]
> Större text i mitten, till exempel som ingress.

### Knappar

> [!BUTTONS]
> [Primär](https://groovy.simplo.dev/exempel/kom-igang "icon rocket")
> [Sekundär](https://groovy.simplo.dev/exempel/guider "secondary icon book-open")

Större och centrerad:

> [!BUTTONS center large]
> [Stor och centrerad](https://groovy.simplo.dev/exempel/byggstenar)

### Ikonlänkar

Öppna [snabbstarten](https://groovy.simplo.dev/exempel/kom-igang/snabbstart "icon zap") när du vill börja, eller [rollerna](https://groovy.simplo.dev/exempel/kom-igang/roller "icon users") om du undrar vem som får göra vad.

## Rutor och steg

Hänvisningsrutor, neutrala rutor, steg och utfällbara avsnitt.

### Hänvisningsrutor

> [!NOTE]
> Bra att veta.

> [!TIP]
> Ett råd som sparar tid.

> [!IMPORTANT]
> Något läsaren behöver för att lyckas.

> [!WARNING]
> Något som kan gå fel.

> [!CAUTION]
> Något som inte går att ångra.

### Rutor

> [!BOX book-open]
> **Läs mer**
>
> - [Snabbstart](https://groovy.simplo.dev/exempel/kom-igang/snabbstart)
> - [Vanliga frågor](https://groovy.simplo.dev/exempel/guider/vanliga-fragor)

> [!BOX]
> En ruta utan ikon kan innehålla allt, också en annan ruta:
>
> > [!BOX lightbulb]
> > En ruta i rutan.

### Steg

Stegen numreras löpande på sidan.

> [!STEP]
> **Första steget**
>
> Fritt innehåll, med listor, bilder och tabeller.

> [!STEP]
> **Andra steget**
>
> Numret kommer av sig självt.

> [!STEP plain]
> **En ruta utan nummer**
>
> Räknas inte i ordningen.

### Utfällbara avsnitt

> [!DETAILS]
> **Fäll ut mig**
>
> Avsnitt direkt efter varandra står ihop som ett dragspel.

> [!DETAILS]
> **Och mig**
>
> I utskrift och export står hela innehållet.

## 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:

> [!TABLE plain first-20]
>
> | 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
<?php
$arende = $klient->hamta(1042);
echo $arende->rubrik;
```

### Bilder

Klicka på en bild för att se den i full storlek.

![En sjö med berg bakom](https://groovy.simplo.dev/exempel/byggstenar/tabeller-och-bilder/fjall.jpg?classes=shadow)

Med halva bredden, till höger och med en tunn linje:

![Översikten i tjänsten](https://groovy.simplo.dev/exempel/byggstenar/tabeller-och-bilder/oversikt.png?classes=docs-w-50,docs-right,docs-border)

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å ![Info](https://groovy.simplo.dev/exempel/byggstenar/tabeller-och-bilder/ikon.png) för mer information.

## Filer och inbäddningar

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.

### PDF

[Snabbguide](https://groovy.simplo.dev/exempel/byggstenar/filer/snabbguide.pdf "embed 500")

### Word

[Rutin för månadsavstämning](https://groovy.simplo.dev/exempel/byggstenar/filer/rutin.docx "embed")

### PowerPoint

[Kvartalsgenomgång](https://groovy.simplo.dev/exempel/byggstenar/filer/kvartal.pptx "embed")

### Excel

[Budget](https://groovy.simplo.dev/exempel/byggstenar/filer/budget.xlsx "embed 420")

### Som vanlig länk

En vanlig länk öppnar filen i samma vy: [rutin.docx](https://groovy.simplo.dev/exempel/byggstenar/filer/rutin.docx), [budget.xlsx](https://groovy.simplo.dev/exempel/byggstenar/filer/budget.xlsx).