Cta link

In progress

Link with an optional text. The 'default' option is used in Adjacent image text component. The 'link-list' option is used in Link list component. Use is-external only when url is going to outside service and opens to a new window. Also when using is-external remember to describe this in aria-label for accessibility.

<hy-cta-link
  link-content="Example cta link"
  sc-label="example"
  url="https://google.com"
  is-external="false"
/>

<hy-cta-link
  link-content="Example cta link"
  sc-label="example"
  url="https://google.com"
  is-external="true"
  variant="link-list"
/>

Properties

Property	Attribute	Description	Type	Default
isExternal	is-external	Is it external link?	boolean	false
linkContent	link-content	Link title	string	''
scLabel	sc-label	Aria-label	string	undefined
url	url	Link url	string	undefined
variant	variant	default or link-list option	CtaLinkVariants.default \| CtaLinkVariants.linkList	CtaLinkVariants.default

Dependencies

Used by

• hy-adjacent-image-text
• hy-link-list

Depends on

• hy-icon

---

Helsinki University Design System