Overview of external web UI elements

The table below contains an overview of UI elements needed for the external web part of OS2Valghalla.

The table is split into the following columns:

OS2Valghalla: The name of the element used in the OS2Valghalla project, specifically for external web, including a link to a page containing the element in the Figma prototype.
Designsystemet (FDS): The name of the corresponding element from the FDS framework and the link to the official documentation.
Angular: The name of the corresponding element from the Angular Material framework and the link to the official documentation.
Notes: Extra notes in relation to that element

OS2Valghalla	Designsystemet (FDS)	Angular	Notes
Button	Knap	Button	The standard Angular button can be used together with the FDS CSS class out-of-the-box
Card	Card	Card	The FDS and Angular markup differs quite a bit
Alert	Besked	N/A	Angular does not have a standalone component for in-line alert/messages.
Table	Tabel	Table	The Angular table only needs a few changes to work with FDS. However, the arrows for sorting have to be changed to FDS.
Snackbar	Toastbesked	Snackbar	While the FDS toastbesked and the Angular snack are both a pop-up information notification, they differ a lot from each other.
Structured list	Struktureret liste	List	Do note that the FDS list makes use of the FDS flexbox grid.
Header	Header	N/A	As a header is not a component it is not provided in the Angular framework. However FDS has specific markup and CSS for headers.
Footer	Footer	N/A	As a footer is not a component it is not provided in the Angular framework. However FDS has specific markup and CSS for footers.
Stepper	Trinindikator
Breadcrumbs	Brødkrummer
Status label	Badge
Validation error	Fejlmeddelse
Popup	Modal	Dialog
Tooltip	Tooltip
Paginator	Paginering
Back-to-top	Tilbage til toppen
Tabs	Faneblade
Loading	Loading spinner
Search bar	Søgefelt
Radio button	Radioknap
Input field	Input felt
Dropdown	Dropdwn
Date field	Datofelt
Datepicker	Datovælger
Checkbox	Tjekboks
Grid layout	Grid	Grid list	Both FDS and Angular is based on flexbox. It’s important to use the margin and padding from FDS