# Elválasztó és Lista elem

> Az Elválasztó elem (vonal ikonnal) és a Lista elem (ikon, cím, meta, leírás és kiemelés) beállításai.

## Elválasztó elem

Az **Elválasztó** elem vízszintes vagy függőleges elválasztó vonalat rajzol, amelyre ikont is tehetsz.

![Az Elválasztó elem beállításai a szerkesztőben](./kepek/elemek-5-divider.webp)

*Az Elválasztó elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Magasság**, a **Szélesség**, a **Stílus**, az **Irány**, az **Igazítás** és a **Szín** mezője, alattuk az **Ikon** csoport látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Magasság** | A vonal vastagsága (mértékegységgel). | 1 |
| **Szélesség** | A vonal hossza. | |
| **Stílus** | A vonal stílusa: `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`. | Folytonos |
| **Irány** | A vonal iránya: vízszintes vagy függőleges. | Vízszintes |
| **Igazítás** | A vonal igazítása a tárolóján belül: elejére, középre vagy végére. | |
| **Szín** | A vonal és az ikon színe. | |

### Ikon

| Beállítás | Mit csinál |
| --- | --- |
| **Ikon** | A vonalon megjelenő ikon. |
| **Tipográfia** | Az ikon stílusa (méret, betűbeállítások). Csak kiválasztott ikonnál érhető el. |

## Lista elem

A **Lista** elem testreszabható listát készít ikonokkal, címekkel, meta információval, leírással és opcionális kiemelő felirattal.

![A Lista elem beállításai a szerkesztőben](./kepek/elemek-5-list.webp)

*A Lista elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Listaelemek** ismétlődő mező (egy „Első elem" tétellel), az **Elem hozzáadása** gomb, alatta a **Listaelem**, **Kiemelés**, **Ikon**, **Cím**, **Meta**, **Leírás** és **Elválasztó** csoport látszik.

### Listaelemek

A **Listaelemek** ismétlődő mezőben vehetsz fel és állíthatsz be elemeket. Minden elemnek ezek a mezői vannak:

| Mező | Mit csinál |
| --- | --- |
| **Ikon** | Nem kötelező ikon az elemhez. |
| **Cím** | A fő cím szövege. |
| **Link címe** | A cím kattinthatóvá tétele. |
| **Meta** | Kiegészítő információ, például ár vagy dátum. |
| **Leírás** | Hosszabb leírás. |
| **Kiemelés** | Kiemeltként jelöli az elemet. |
| **Kiemelés felirata** | Egyéni felirat a kiemelt elemhez. Csak bekapcsolt kiemelésnél érhető el. |

### Listaelem

| Beállítás | Mit csinál |
| --- | --- |
| **Tartalom igazítása** | Az elem tartalmának vízszintes igazítása (`justify-content`). |
| **Elemek igazítása** | Az elem tartalmának függőleges igazítása: elejére, középre, végére vagy alapvonalra. |
| **Margó** | Az egyes listaelemek külső távolsága. |
| **Kitöltés** | Az egyes listaelemek belső távolsága. |
| **Páratlan háttér** | A páratlan sorszámú elemek háttérszíne. |
| **Páros háttér** | A páros sorszámú elemek háttérszíne. |
| **Szegély** | A listaelemek szegélye. |
| **Automatikus szélesség** | Bekapcsolva az elemek tartalmuk szélességét veszik fel, az elválasztó vonal nem nő. |

### Kiemelés

A kiemelt elemek felirata és tartalma külön stílust kap.

| Beállítás | Mit csinál |
| --- | --- |
| **Blokk** | A kiemelő feliratot blokk elemként jeleníti meg. |
| **Kitöltés**, **Háttér**, **Szegély**, **Tipográfia** | A kiemelő felirat belső távolsága, háttere, szegélye és betűstílusa. |
| **Tartalom** csoport: **Kitöltés**, **Háttér**, **Szegély** | A kiemelt elem tartalmának belső távolsága, háttere és szegélye. |
| **Szöveg színe** | A kiemelt elem címének, metájának és leírásának színe. |

### Ikon

| Beállítás | Mit csinál |
| --- | --- |
| **Ikon** | Az összes listaelem alapértelmezett ikonja. |
| **Cím után** | Az ikont a cím után helyezi el, előtte helyett. |
| **Szélesség**, **Magasság** | Az ikon szélessége és magassága. |
| **Méret** | Az ikon betűmérete, illetve az SVG szélessége és magassága. |
| **Szín** | Az ikon színe. |
| **Háttérszín** | Az ikon háttérszíne. |
| **Szegély** | Az ikon szegélye. |
| **Dobozárnyék** | Az ikon árnyéka. |

### Cím, Meta, Leírás

| Csoport | Beállítás | Mit csinál |
| --- | --- | --- |
| **Cím** | **Margó** | A cím külső távolsága. |
| **Cím** | **HTML-címke** | A cím HTML-címkéje. Dinamikus adatot is elfogad, a helykitöltő `span`. |
| **Cím** | **Tipográfia** | A cím betűstílusa. |
| **Meta** | **Margó**, **Tipográfia** | A meta szöveg külső távolsága és betűstílusa. |
| **Leírás** | **Tipográfia** | A leírás betűstílusa. |

### Elválasztó

A listaelemek közti vonal beállításai.

| Beállítás | Mit csinál |
| --- | --- |
| **Kikapcsolás** | Eltünteti az elemek közti elválasztó vonalat. |
| **Stílus** | A vonal szegélystílusa. |
| **Szélesség** | A vonal szélessége. |
| **Magasság** | A vonal vastagsága. |
| **Szín** | A vonal színe. |

A **Stílus**, a **Szélesség**, a **Magasság** és a **Szín** csak akkor érhető el, ha az elválasztó nincs kikapcsolva.