Link Box
Link box is a flexible and visual lift up element. The entire rectangular area acts as a link, so it’s easy to click / tap. Link box always contain a title. Additionally it can contain an image and a short text string under the title.
# Usage
<hy-link-box
class="big landing"
variant="landing"
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Link box image"
text-title="Link box title"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.helsinki.fi"
is-external="false"
>
</hy-link-box>
<hy-link-box
class="small content"
variant="content"
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Link box image"
text-title="Link box title"
text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
url="https://www.helsinki.fi"
is-external="false"
>
</hy-link-box>
# Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
imageAlt | image-alt | image alt text | string | null |
imageUrl | image-url | image source url | string | null |
isExternal | is-external | If the link is external | boolean | false |
textDescription | text-description | description | string | null |
textTitle | text-title | link title | string | undefined |
url | url | link url | string | undefined |
variant | variant | variant content or landing | LinkBoxVariants.default \| LinkBoxVariants.landingPage | LinkBoxVariants.default |