Avatar |  | A felhasználó grafikus ábrázolása: általában fénykép, illusztráció vagy iniciálé. |
Breadcrumbs |  | A felhasználói felületeken használt navigációs eszköz, amely a kiinduló ponttól a felhasználó jelenlegi tartózkodási helyéig vezető utat mutatja. |
Sidebar menu |  | Egy keskeny függőleges terület, amely a fő megjelenítési terület mellett található, és jellemzően kapcsolódó információkat vagy navigációs lehetőségeket tartalmaz. |
Dropdown menu |  | Összetettebb típusú menü a nagy tartalommal rendelkező webhelyek számára; a további opciók listája lenyitható az elsődleges menüpont alatt. |
Hamburger menu |  | Különböző oldalakra vagy szakaszokra mutató hivatkozások melyek egy vízszintes vonalakból álló hamburgerre emlékeztető gomb mögé vannak elrejtve. |
Sticky heather |  | Egy olyan fejléc, amely nem tűnik el az oldal lefelé görgetésekor, hanem az oldal felső részéhez tapad. Ezzel az alapvető navigációs terület mindig elérhető marad, ami hasznos lehet a tartalomban gazdag, hosszú oldalak esetében. |
Call to action button (CTA) |  | Egy olyan gomb, amelynek célja, hogy a felhasználót egy bizonyos művelet megtételére ösztönözze. (például vásárlás, kapcsolatfelvétel, előfizetés stb.). |
Footer |  | A lábléc a weboldal alsó része, amely általában a weblap végét jelzi. A lábléc teret biztosít a hasznos linkek és adatok számára, amelyek a felhasználókat esetleg érdekelhetik. |
Form |  | Interaktív elem, amely lehetővé teszi a felhasználók számára, hogy információkat küldjenek a rendszernek vagy a szervernek. |
Cards (tiles) |  | A kártyák vagy csempék, olyan elrendezési elemek, amelyek segítik a homogén adatok vagy tartalmak elrendezését és megjelenítését. A kártyák általában egyfajta rácsba vannak rendezve, de minden kártya külön darabként látható. |
Tags |  | A címke gyakran megtalálható a nagy mennyiségű homogén tartalommal rendelkező blogokban és webhelyeken. A címke egy kulcs szóként jelenik meg, amely lehetővé teszi a felhasználók számára, hogy közvetlenül a vele megjelölt elemekre ugorjanak. A címkék valójában metaadatok darabjai, amelyek gyors hozzáférést biztosítanak bizonyos tartalom kategóriákhoz. |
Dialog box |  | A párbeszédpanel egy kis ablak formájában megjelenő grafikus vezérlőelem, ami a tartalom felett jelenik meg és információkat közöl a felhasználóval amire választ vár. Fajtái: Alert message: Egy olyan ablak, ami a felhasználót a fontos változásokról tájékoztatja, amit egy (általában OK) gombbal lehet jóváhagyni. Confirmation: Egy felugró ablak, ahol a megadott üzenetet OK és a Mégse gombokkal lehet jóváhagyni. |
Button |  | A gombok műveleteket indítanak el, mint például egy űrlap elküldése vagy egy interfész-összetevő megjelenítése/elrejtése. |
Checkbox |  | Egy jelölő négyzet az előre meghatározott lehetőségek közül való választáshoz. Önmagában használva bináris választási lehetőséget ad (bejelölve/nem bejelölve). Csoportban megadva lehetővé teszi a felhasználó számára, hogy több értéket válasszon ki a lehetőségek listájából. |
Color picker |  | Egy bemeneti érték, ami lehetővé teszi a szín kiválasztását. |
Combobox (autocomplete, autosuggest) |  | Automatikus kiegészítés és javaslatok a szabadszavas kereső mezőhöz, amely részleges bemeneten alapuló kifejezést fejez be. |
Date input |  | Dátum beviteli eszköz – több egyedi mezőre osztva nap/hónap/év. |
Datepicker (calendar) |  | A dátumválasztó egy naptárnézet, amiben egy dátumot tudunk kiválasztani. |
Drawer (Tray, Flyout) |  | Egy panel, amely kicsúszik a képernyő széléről. |
Header |  | Olyan elem, amely egy webhely vagy alkalmazás összes oldalának tetején jelenik meg; általában tartalmazza a webhely nevét és a fő navigációt. |
Hero (jumbotorn, banner) |  | Az első dolog, amit az emberek látnak, amikor belépnek az oldalra, a hero szekció az a terület, amely azonnal megjelenik a képernyőn a logó és menü alatt. Általában egy teljes szélességű képet tartalmaz. |
Icon |  | Egy weboldalon egy ikon egy másik weboldal témáját vagy információs kategóriáját jelöli. Az ikon gyakran egy hiperhivatkozás is egy másik oldalra. |
Link (anchor, hyperlink) |  | Egy forrásra való hivatkozás. Ez lehet külső (például egy másik weboldal) vagy belső (például egy adott elem az aktuális dokumentumban). |
Navigation (Nav, Menu) |  | Általában belső oldalakra mutató hivatkozások rendszerezett listája. A navigációs menük az oldalak fejléceiben vagy oldalsávjaiban jelennek meg, gyors elérhetőséget biztosítva az aloldalakhoz. |
Pagination |  | A lapozást biztosítja, amikor az információkat több oldalra osztják fel ahelyett, hogy az összeset egyetlen oldalon jelenítenék meg. A felhasználó kattinthat a „következő” vagy „előző” lehetőségre így navigálva az oldalak között. |
Progress bar |  | Vízszintes sáv, amely egy régóta futó feladat aktuális befejezési állapotát jelzi, és rendszerint a feladat előrehaladtával folyamatosan frissül. |
Progress indicator (Progress tracker, Stepper, Steps, Meter) |  | A felhasználó előrehaladásának reprezentálása egy sor különálló lépésen keresztül. |
Radio button (Radio, Radio group) |  | Választógombok, melyek lehetővé teszik a felhasználónak, hogy egyetlen opciót válasszon az előre meghatározott opciók listájából. |
Rating |  | A felhasználók csillagokat használva értékelést adhatnak egy termékhez vagy dologhoz. |
Segmented control (toggle button group) |  | Hibrid gombcsoport, ami a különböző lehetőségek vagy nézetek között vált. |
Skip link |  | Az oldalon belüli hivatkozás egy másik szakaszra ugráshoz. Elsősorban a billentyűzet használatával navigáló felhasználók számára. |
Slider (range input) |  | Egy olyan csúszka, ami segít kiválasztani egy meghatározott érték tartományon belüli értéket. |
Stepper (nudger, quantity) |  | Vezérlő a numerikus érték szerkesztéséhez, csökkentő/növelő gombokkal. |
Table |  | Nagy mennyiségű adat sorokban és oszlopokban történő megjelenítésére szolgáló komponens. |
Tabs |  | Egy kattintható terület, amely egy másik oldalt vagy területet mutat. Ha egy tabra kattint, megjelenik a hozzá tartozó a lap tartalma, és minden más megnyitott lap eltűnik. |
Toast (snackbar) |  | Rövid, ideiglenes értesítés, ami a tartalom felett helyezkedik el. Célja, hogy észrevehető legyen anélkül, hogy megzavarná a felhasználói élményt |
Toggle (switch, lightswitch, toggle button) |  | Két állapot közötti váltáshoz használt vezérlő (leggyakrabban be/ki) |
Tooltip (popover, toggletip) |  | Egy elem leírásának vagy további információinak megjelenítésére szolgáló eszköz. Úgy jelenik meg ha a felhasználó az egeret az elem fölé húzza vagy rákattint. |
Visually hidden (screenreader only) |  | Megjelenít vagy elrejt egy elemet anélkül, hogy megváltoztatná a dokumentum elrendezését. |