Skip to content

Link dashboard widget

Link dashboard widget is a list of links that provides quick access to frequently used functions, pages, or external resources.

Usage ---

Link dashboard widget

When to use

  • In dashboards and tile layouts.
  • To provide a list of navigation or action links.

Best practices

  • Prevent overcrowding by keeping the number of links between 2 and 6.
  • Keep labels short and clear, directly indicating the link's purpose and destination.
  • Arrange links by their relevance or frequency of use to facilitate quick access.
  • Use skeleton to represent its loading state.

Design ---

Elements

Link dashboard widget elements

  1. Icon (optional), 2. Heading, 3. Actions (optional), 4. Links

Code ---

The link widget is implemented by CSS classes and the usage of other Element components.

Component usage

To simplify the usage and reduce the code, Element offers a Angular component as wrapper with streamlined inputs. The component should be used together with the card.

import { SiLinkWidgetComponent } from '@siemens/element-ng/dashboard';

@Component({
  :
  imports: [SiLinkWidgetComponent],
  standalone: true
})

CSS class usage

For more flexibility and control, use the CSS classes directly in the <si-card> component.