Manual link box list

Not done

Manual link box list is a group of link boxes. It can be placed into Landing page (variant=landing) or into Content pages (variant=content). For Landing pages the number of link boxes is strictly 3 whereas for Content pages it can vary from 3 to 9.

# Usage

<hy-link-box-list
  variant="landing"
  data-items='[
  {"heading":"Link box title",
   "description":"Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "imageUrl": "https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs",
   "imageAlt": "Test image",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"Text description Lorem ipsum.",
   "imageUrl": "https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs",
   "imageAlt": "Test image",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "imageUrl": "https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs",
   "imageAlt": "Test image",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"}
  ]'
>
</hy-link-box-list>

<hy-link-box-list
  data-items='[
  {"heading":"Link box title",
   "description":"Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "imageUrl": "https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs",
   "imageAlt": "Test image",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"",
   "imageUrl": "https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs",
   "imageAlt": "Test image",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"Text description Lorem ipsum",
   "imageUrl": "",
   "imageAlt": "",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "imageUrl": "",
   "imageAlt": "",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"",
   "imageUrl": "",
   "imageAlt": "",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"",
   "imageUrl": "",
   "imageAlt": "",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"},
   {"heading":"Link box title",
   "description":"Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   "imageUrl": "https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs",
   "imageAlt": "Test image",
   "boxUrl": "https://www.helsinki.fi",
   "isExternal": "false"}
  ]'
>
</hy-link-box-list>

# Properties

Property Attribute Description Type Default
dataItems data-items data LinkBox[] \| string undefined
variant variant landing or content LinkBoxVariants.default \| LinkBoxVariants.landingPage LinkBoxVariants.default

# Dependencies

# Depends on

← Large process flow →