Page Comparison

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

Breadcrumbs

BrødkrummerStepper

• 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