Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# hy-image
## Usage
Defaults to 16/9 aspect ratio if none is provided. Caption is optional.
<hy-image
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image"
aspect-ratio-width=16
aspect-ratio-height=9
caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>
```html
<hy-image
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image"
aspect-ratio-width=16
aspect-ratio-height=9
caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>
```
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------- | --------------------- | ----------- | -------- | ----------- |
| `aspectRatioHeight` | `aspect-ratio-height` | | `number` | `9` |
| `aspectRatioWidth` | `aspect-ratio-width` | | `number` | `16` |
| `caption` | `caption` | | `string` | `null` |
| `imageAlt` | `image-alt` | | `string` | `null` |
| `imageUrl` | `image-url` | | `string` | `undefined` |
Ekaterina Kondareva
committed
## Dependencies
### Used by
- [hy-cta-liftup-image-text](../cta-liftup-image-text)
### Graph
```mermaid
graph TD;
hy-cta-liftup-image-text --> hy-image
style hy-image fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
Helsinki University Design System