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 (vertical)	Trinindikator	Stepper	It is important that the stepper is vertical and not horizontal, in order to follow the FDS guidelines.
Status label	Badge	N/A	While Angular contains a badge component, it is not the same kind of badge as the FDS bade.
Validation error	Fejlmeddelse	Input validation	Angular’s input errors are already part of components with input validation.
Popup	Modal	Dialog	Be very mindful of the FDS modal guidelines (retningslinjer) when creating modals.
Tooltip	Tooltip	Tooltip	Note that the FDS tooltip also has a hidden screen reader attribute.
Paginator	Paginering	Paginator	If the Angular paginator component is used, then it is important that aria labels and screen reader attributes from FDS are included.
Back-to-top	Tilbage til toppen	N/A	This element can just be a simple fixed button, but it is important that the FDS guidelines are followed.
Tabs	Faneblade
Loading	Loading spinner
Search bar	Søgefelt
Radio button	Radioknap
Input field	Input felt
Dropdown	Dropdwn	Select
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