Shortcut

In progress

Shortcuts are used on section landers to provide quick access to commonly used or particularly important pages that want to be lifted in priority. Shortcuts are ordered horizontally first.

Examples

<hy-shortcuts
  list-heading="Shortcuts list heading number one"
  data-items='[
  {"heading":"3500 h","url":"https://yle.fi"},
  {"heading":"Example link label one","url":"https://yle.fi"},
  {"heading":"Example link label two. Very Long label indeed to test if it fits.", "url":"https://yle.fi"},
  {"heading":"Example link label three", "url":"https://yle.fi"}]'
>
</hy-shortcuts>

<hy-shortcuts
  list-heading="Shortcuts list heading number two"
  data-items='[
  {"heading":"Example link label one","url":"https://yle.fi"},
  {"heading":"Example link label two. Very Long label indeed to test if it fits", "url":"https://yle.fi"},
  {"heading":"Example link label three", "url":"https://yle.fi"}]'
>
</hy-shortcuts>

Properties

Property	Attribute	Description	Type	Default
dataItems	data-items	a set of links: heading and url	ShortcutLinkValue[] \| string	undefined
listHeading	list-heading	optional shortcut list title	string	''

Dependencies

Depends on

• hy-icon

---

Helsinki University Design System