Many maritime user interfaces have optional information components (cards) embedded in a user interface. These cards are reusable components that can be shared across many applications. The card pattern shows how to design such information elements and how to embed them in applications.


The cards system in OpenBridge consist of the cards themselves and their variations and a panel system that manages how the cards are shown (and hidden) on the screen.

Card variations

Cards are available in multiple variations depending on its content. Each card has an optional minimize function that allow users to collapse the card if possible. Cards may also have an optional edit function that allow users to manipulate the content in a card. In addition, we offer several ways to stack content within cards.

No items found.

Side panel with cards

Click to collapse the side panel. The panel can change to a fully collapsed side panel or a minimized side panel.
Click to fold the side panel. One card will be visible at a time, and can be scrolled through with the up and down arrow.

Minimize and edit cards

Click to minimize and expand a card.
To edit and configure the content in a card, click the edit icon.