FAQ | This is a LIVE service | Changelog

Sprint 2: Build Link component

Build Link component.

Figma designs are at https://www.figma.com/design/DpS9o1LIG27rvzTqc13bcQ/Templates-%E2%80%93-wireframes?node-id=1140-10333&m=dev

Screenshot_2024-06-07_at_09.18.05 Link item with Description:

  • Link with option description
  • To be used in the Link Grid component
  • Char limit of 50
  • allow external links - icon after title

Styling: /* Heading/XS (H6) / Link colour #000102 Description colour #131922 font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: 142%; / 25.56px */ border-radius: var(--Radius-radius-xs, 4px); background: var(--Colour-Grey-Grey-50, #F3F4F6);

Hover state:

  • The whole component is to be hoverable
  • Title becomes underlined. Styling: (Same as above) background-color: #F3F4F6; text-decoration-line: underline;

Screenshot_2024-06-07_at_09.23.50 Stacked Links without Description:

  • Links to be stacked
  • Only to be used within the "Featured Links" component.
  • Allow external links - replace the arrow in stacked Styling: (Same as the others for text styling) padding: 0, 16px; divider: #00010226
Edited by Jenny Dumitrescu